Javascript 如何将对象转换为HTML标记

我有一个要转换为HTML标记的对象。这就是目标：

风险值数据={ htmlcontent：{ 分区：{ p:你好，世界， 分区：{ p:下一个内容 } } } } 这是我希望从对象输出的HTML：

你好，世界

下一内容

---

我不知道有什么方法可以做到这一点。我认为如果我将对象转换为数组，可能会丢失数据。

假设您可以控制输入，我将创建一个具有3个属性的对象：

元素{

元素：标记元素字符串的名称。 innerText：元素字符串的文本内容。 子元素：包含其子元素的数组。 }

您可以添加更多属性，这只是基于您的输入数据

使用此函数，您可以创建一个自定义解析函数，该函数创建元素，修改其属性并递归地将其附加到其父元素。我在下面创建了一个示例

/* JSON数据 [{ 元素：div， 儿童：[ { 元素：p， innerText:hello world }, { 元素：div， 儿童：[ { 元素：p， innerText：另一个P } ] } ] }]; */ const jsonData='[{element:div，children:[{element:p，innerText:hello world}，{element:div，children:[{element:p，innerText:other p}]}]； const data=JSON.parsejsonData； /** *以JSON格式表示DOM元素。 *@type{{ *元素：字符串， *子项：未定义的|！数组， *innerText:字符串 * }} */ 让我们来讨论一个问题； /** *从JSON解析元素。 *@param{！jsonElement}元素从JSON到解析。 *@param{！DOMElement}将此元素附加到的parentNode元素。 */ const parseElement=element，parentNode=document.body=>{ 如果！element.element抛出新错误“必须定义元素”； const domeElement=document.createElementelement.element； 如果element.innerText doElement.innerText=element.innerText； if元素。子元素{ 对于元素的const child.children{ parseElementchild、DomeElement； } } parentNode.AppendChildDomainElement； }; 对于数据的常量元素{ parseElementelement； }

---

这并不是使用javascript模板系统的最佳方式，像现在这样存储html会让您遇到瓶颈，试想一下，如果您必须存储一个带有多个ul和li的导航栏，用于菜单和子菜单

<>你应该考虑使用一个模板系统，比如这里是A的主题

---

如果您想更高级地使用javascript框架，例如，或者，它将极大地帮助您并指导您快速获得一个完全工作的web应用程序如果您是初学者，我强烈建议您使用vuejs鉴于您的对象结构，我将这样做：

风险值数据={ htmlContent：{ 分区：{ p:你好，世界， 分区：{ p:下一个内容 } } } } 函数createElementsFromObjectparent，obj{ 对于Object.keysobj的let键{ 让el； obj的开关类型[键]{ 大小写字符串： el=document.createElementkey； el.textContent=obj[key]； 打破 案例对象： el=document.createElementkey； createElementsFromObjectel，obj[key]； 打破 } 父母子女； } } createElementsFromObjectapp，data.htmlContent； console.logapp.innerHTML； div{ 背景色：F0； 填充：10px； } div>div{ 背景色：E0； } div>div>div{ 背景色：d8d8d8； } p{ 背景色：石灰； 填充物：5px； }

---

请注意，这里有一个对象，而不是JSON。还要注意Node.js似乎与问题无关，因此我对问题进行了编辑。您最受欢迎@rorymcrossan关于您正在尝试做的事情，是否可以更改对象结构？考虑到它的当前形式，除了重复的键之外，不可能判断一个元素应该是子元素还是兄弟元素。您似乎在对象的末尾有一个额外的div，但不在HTML示例中。该对象看起来也不正确，关联数组/或对象中的第二个或后续div键将替换第一个。抱歉，我错误地将旧对象/json noew edited与上面建议的结构放在一起了我很好，但我从来都不是程序员，所以你能在不修改输入数据的情况下帮助我使用现有的structureAdded解决方案吗。