javascript - 不能用 for 循环附加子级

Question

为什么我不能用这个for循环附加很多块？

var di = document.createElement("div");
di.className = 'box';
di.style.width = '100px';
di.style.height = '100px';

for (var i = 0; i < 5; i++) {
    document.body.appendChild(di);
}

然而，这个有效：

for (var i = 0; i < 5; i++) {
    var di = 'di' + [i],
        di = document.createElement("div");
    di.className = 'box';
    di.style.width = '100px';
    di.style.height = '100px';
    document.body.appendChild(di);
}

但是为什么第一个不起作用？

Answer 1

在您的第一个示例中，始终附加相同的 dom 元素，因为它是在循环之外定义的。在第二个中，您为每次迭代正确地创建了一个新元素。

如果您愿意，您可以使用创建现有元素的副本cloneNode。第一个示例可以重写为：

var di = document.createElement("div");
di.className = 'box';
di.style.width = '100px';
di.style.height = '100px';

for (var i = 0; i < 5; i++) {
    document.body.appendChild(di.cloneNode());
}

Answer 2

因为一个元素不能同时出现在多个地方。您必须为要在页面中添加的每个元素创建一个新实例。