不能用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元素,因为它是在循环外定义的.在第二个中,您正确地为每个迭代创建一个新元素.

如果需要,可以使用创建exising元素的副本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());
}