使用appendChild在循环内部或外部声明div变量

Question

几年后，我没有使用JavaScript进行一些实践，所以如果这是一个愚蠢的问题，我很抱歉。

我从一个简单的循环开始，输出几次"你好，世界！"：

for (i = 0; i < 5; i ++){
    var div = document.createElement("div");
    div.innerHTML = "Hello, world!";
    document.body.appendChild(div);
}

这给了我五句"你好，世界！"。我想看看如果我把变量声明移出循环，代码是否会运行得更快：

var div = document.createElement("div");
div.innerHTML = "Hello, world!";
for (i = 0; i < 5; i ++){
    document.body.appendChild(div);
}

我本想得到五行"你好，世界！"，但我只得到了一行。有人能解释一下原因吗？

谢谢！

Answer 1

在第一个片段中，您将在每次迭代中创建一个新元素并将其附加。

在第二个片段中，您将创建一个单个元素，然后实质上移动它五次。

根据MDN:

Node.appendChild()方法将一个节点添加到指定父节点的子节点列表的末尾。如果给定的子节点是对文档中现有节点的引用，则appendChild()会将其从当前位置移动到新位置。这意味着节点不能同时位于文档的两个点中。因此，如果节点已经有一个父节点，则首先删除该节点，然后将其附加到新位置。

因此，在使用.cloneNode()方法添加元素之前，您应该克隆该元素：

var div = document.createElement("div");
div.innerHTML = "Hello, world!";
for (i = 0; i < 5; i ++){
    document.body.appendChild(div.cloneNode(true));
}