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

Question

我正在使用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);

}

Answer 2

执行以下操作时：

for (let index = 0; index < 5; index++) {
     row.appendChild(col);
}

您要添加5个完全相同 col对象。

就像说，

“嘿，孩子A是我的孩子。” 5次。

在您的情况下，它已经知道COL是ROW的子级。告诉它百万次不同的时间毫无意义。

您想要的是：

*“嘿，孩子A是我的孩子。”

*“嘿，看起来像A的孩子B是我的孩子。”

...

*“嘿，看起来像A的孩子E是我的孩子。”

因此，这就是您的代码的外观：

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);

}

希望有帮助！