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创建一个exising元素的副本。第一个例子可以重写为：

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

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

不能用for循环追加孩子

2 个答案: