高效添加子節點

我需要將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

回答