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