javascript - 是否可以从 HTML 代码生成 DOM 代码？

Question

我需要使用 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代码，所以我只需要在最后添加它？

Answer 1

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

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

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

Answer 2

您可以使用 innerHTML 函数：

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

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

Answer 3

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

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