javascript - 高效添加子节点

Question

我需要向 div 添加 x 个子级。到目前为止我只是使用:

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);
}

似乎只创建了一个 child 。

Answer 1

如果你在一个已经存在并附加到 DOM 的节点上调用 appendChild ，那么它要么直接移动到新位置，要么先从文档树中删除，然后插入到调用它的父元素的末尾。

所以你给出的第二个代码基本上不断地向同一个元素插入和删除相同的节点，导致整个过程结束时只有一个节点。