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>");

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

3 个答案: