是否可以从 HTML 代码生成 DOM 代码？答案

【问题标题】：Is it possible to generate the DOM code from the HTML code?是否可以从 HTML 代码生成 DOM 代码？
【发布时间】：2012-11-01 00:31:34
【问题描述】：

我需要使用 DOM 动态创建元素。我知道如何使用document.createElement、appendChild 方法来做到这一点，但这通常是一个漫长的过程。

假设我想在我的 HTML 页面中添加这个：

<div id="my_account" style="visibility:hidden">
  <input id="my_account_close" type="submit" value="Close" onclick="closeMyAccount();">
  <span id="my_account_username">Blabla</span>
  <input id="my_account_username_modify" type="submit" value="Change Name" onclick="modifyUserName();">
  <span id="my_account_email">a@asqs.com</span>
</div>

我是否必须一个一个地创建每个元素并设置所有属性，然后使用appendChild 方法？是否有一个“魔术”函数可以获取返回父元素的html代码，这样我只需在最后添加它？

【问题讨论】：

您可以创建一个新的div，设置它的innerHTML，然后获取对第一个孩子的引用。这需要您在 JS 中将 HTML 作为字符串，如果您使用示例中的内联事件处理程序，这可能会变得非常混乱。

标签： javascript dom

【解决方案1】：

不，您可以只获取整个字符串并将其作为 innerHTML 添加到父 div。

它将成为下一行代码中 dom 的一部分...

someParent.innerHTML = myHTMLString;
var d = document.getElementById('my_account');//this will return the first object in your code

【讨论】：

【解决方案2】：

你可以使用innerHTML函数：

document.getElementById(element_id).innerHTML="<p>someHtml</p>";

请注意 JS 不支持多行字符串。

【讨论】：

你不应该 += 到 innerHTML
是的，因为事件处理程序等。但在这种情况下是最简单的方法。
不仅仅是因为处理程序。将 DOM 序列化为字符串，在字符串中添加一点，将字符串解析为新节点，然后销毁旧的 DOM 并用新的替换它是没有意义的。它具有不必要的破坏性。
是的，我知道这一点，但我想让示例尽可能简单。
我相信你知道这一点，但许多其他人不知道，并最终在非常不幸的情况下使用它，例如在循环中更新大型 DOM。

【解决方案3】：

是的，有一个名为 jQuery 的“神奇”库：http://api.jquery.com/append/

$("div").append("<div class='aaa'>Example</div>");

【讨论】：