高效添加子节点

我需要将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); 
}

似乎只创建一个孩子。

2011-02-23 speg

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

2011-02-23 05:20:27

您不会每次追加相同的空元素 - 您正在追加一个不同的空元素。即使这些元素在各方面似乎都是相同的，但它们却是不同的情况。

如果你想附加了一系列的DIV的一个元素，那么你可能有更多的运气附加到元素的innerHTML属性的更有效的方法：

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

有串联的更有效的方法JavaScript中的字符串，但是该示例说明了这个概念。

_{（强制性jQuery插头）}

2011-02-23 05:24:16 Justin

如果调用appendChild已经存在并连接到DOM节点上，那么它可以直接移动到新位置，或首先从文件树中删除，然后插入它所调用的父元素的末尾。

因此，您给出的第二个代码基本上不断插入和删除同一个节点到同一个元素，导致整个过程结束时只有一个节点。

2011-02-23 05:24:42 Anurag

回答