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() method：

附加元素之前克隆该元素

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

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

1 个答案: