javascript - 使用for循环动态添加div元素

Question

这个问题已经有答案了:

appendChild in for loop only adds 1 child (3 个回答)

已关闭 3 年前。

我正在使用 for 循环动态添加 div在 JavaScript 中将元素添加到父节点，但我无法这样做，因为它只添加一个元素。

我的代码是这样的:

var row = document.getElementById("rowel");

var col = document.createElement('div');
col.className = "col-sm-3 col-md-3 col-lg-3 mr-auto";



var card = document.createElement('img');
card.src = "./assets/building.jpg";
card.style["max-width"] = "350px";
card.alt = "cant displayed";

col.appendChild(card);

for (let index = 0; index < 5; index++) {

    row.appendChild(col);

}

有人可以帮我解决这个问题吗？

Answer 1

您在每次迭代中添加相同的元素。在每次迭代中创建一个新对象，它应该可以工作

var row = document.getElementById("rowel");

for (let index = 0; index < 5; index++) {
    var col = document.createElement('div');
    col.className = "col-sm-3 col-md-3 col-lg-3 mr-auto";

    var card = document.createElement('img');
    card.src = "./assets/building.jpg";
    card.style["max-width"] = "350px";
    card.alt = "cant displayed";

    col.appendChild(card);

    row.appendChild(col);

}