使用for循环动态添加div元素[重复]答案

【问题标题】：dynamically adding div elements using for loop [duplicate]使用for循环动态添加div元素[重复]
【发布时间】：2020-03-25 19:37:57
【问题描述】：

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

}

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

【问题讨论】：

您是否要在 'row' 中添加 5 个完全相同的 'col'？
只有一个col 对象。如果您想创建多个，请将document.createElement 代码移动到循环中。
预期输出示例？像
您创建了一个元素并不断尝试追加它。由于它是同一个对象，它只是将自身移除并将其添加到新位置。克隆它

标签： javascript dom

【解决方案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);

}

【讨论】：

是的，我想添加相同的元素，因为在某些情况下我需要显示相同的图像。如果我不创建新对象，那么它不会添加？？

【解决方案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);

}

希望对你有帮助！

【讨论】：

非常感谢...知道了