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

Question

我在几年后做了一些JavaScript练习而没有使用它,所以如果这是一个愚蠢的问题,我道歉.

我从一个简单的循环开始输出"Hello,world!" 几次:

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

这给了我五行"Hello,world!".如果我将变量声明移出循环,我想看看代码是否运行得更快:

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

我期望获得五行"Hello,world!" 但我只有一个.有人可以解释原因吗？

谢谢!

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