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

}

希望有帮助！

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

2 个答案:

当您执行以下操作时：

您要的是：