使用JavaScript插入HTML元素

Question

使用以下语法时，不必为每种类型的属性和事件繁琐地搜索解决方法：

elem = document.createElement("div");
elem.id = 'myID';
elem.innerHTML = ' my Text '
document.body.insertBefore(elem,document.body.childNodes[0]);

有没有一种方法可以将整个HTML元素声明为字符串？喜欢：

elem = document.createElement("<div id='myID'> my Text </div>");
document.body.insertBefore(elem,document.body.childNodes[0]);

Answer 1

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之外，因此它比您想象的要快得多。