使用JavaScript插入HTML元素

使用JavaScript插入HTML元素

innerHTML

创建片段然后插入该片段可能会更好，而不是直接弄乱它：

function create(htmlStr) {    var frag = document.createdocumentFragment(),        temp = document.createElement('div');    temp.innerHTML = htmlStr;    while (temp.firstChild) {        frag.appendChild(temp.firstChild);    }    return frag;}var fragment = create('<div>Hello!</div><p>...</p>');// You can use native DOM methods to insert the fragment:document.body.insertBefore(fragment, document.body.childNodes[0]);

好处：

1. 您可以使用本机DOM方法进行插入，例如insertBefore，appendChild等。
2. 您可以在插入实际的DOM节点之前对其进行访问；您可以访问片段的childNodes对象。
3. 使用文档片段非常快捷；比在DOM之外创建元素要快，并且在某些情况下要比innerHTML快。

---

即使

innerHTML

在函数中使用它，它们都发生在DOM之外，因此它比您想象的要快得多。