有效地添加子节点

Question

我需要将x个孩子添加到div中。到目前为止我只是使用：

for (var i = 0; i < x; i++) { 
    element.appendChild(document.createElement(‘div’));
}

但我觉得每次创建相同的空节点都是多余的。然而...

var b = document.createElement('div');
for (var i = 0; i < x; i++) { 
    element.appendChild(b);
}

似乎只创造了一个孩子。

Answer 1

如果在已存在且已附加到DOM的节点上调用appendChild，则将其直接移动到新位置，或者先从文档树中删除，然后插入到文档树的末尾。它被调用的父元素。

因此，您提供的第二个代码基本上会将相同的节点插入并删除到同一个元素，从而导致整个过程结束时只有一个节点。

Answer 2

如果希望节点不同，则仍需要为每次迭代创建一个新节点。

Answer 3

每次都没有附加相同的空元素 - 您要附加不同的空元素。即使元素在各个方面看起来都是相同的，但它们是不同的实例。

如果你想要一种更有效的方法将一系列DIV附加到元素上，那么你可能会有更多的运气附加到元素的innerHtml属性：

var appendHtml = "";
for (var i = 0; i < x; i++) {
    appendHtml += "<div></div>";
}
element.innerHTML += appendHtml;

在JavaScript中连接字符串的方法更为有效，但该示例说明了这一概念。

_{（强制jQuery插件）}