如何动态地将 div 添加到数组中？答案

【问题标题】：How can I add divs to an array dynamically?如何动态地将 div 添加到数组中？
【发布时间】：2015-12-07 23:32:14
【问题描述】：

我想创建几个divs，它们具有相同的选项，如颜色、宽度、高度等。

我想将所有这些 div 添加到一个数组中，但我需要动态执行此操作。

我当前的代码：

var ArrayInfo = []; 

    do { 
    var InfoDiv = document.createElement('div'); 
    InfoDiv.id = 'Info_Div'; 
    InfoDiv.className = 'Info_Div'; 
    InfoDiv.style.width = "100px"; 
    InfoDiv.style.height = "30px"; 
    InfoDiv.style.display = "inline-block"; 

    ArrayInfo.push(InfoDiv);

}while(i < x);

x 可以是一个非常非常大的数字。

这是将 div a 添加到数组的正确方法吗？
如何将文本写入数组元素？

我试过这个：

ArrayInfo[i].innerHTML = "something";

但它没有用。

【问题讨论】：

所有这些 div 都有相同的 id Info_Div，这是非法的 HTML。请详细说明没有用。
i 的变化在哪里？ i 和 x 的值是多少？如果i 从不改变循环将执行 1 次或无限次。请考虑使用for 循环。
ArrayInfo[i].innerHTML = "something"; i 大于数组的长度？？？

标签： javascript arrays dom dom-manipulation

【解决方案1】：

你永远不会增加i，所以你的循环永远不会结束。

其次，你从来没有真正添加任何divs 到文档中——创建它们不会为你做这些。

正如 cmets 中所述，您不能一遍又一遍地使用相同的 id。

var ArrayInfo = [];

var x = 10;

var ctr = document.getElementById('ctr');

for (var i = 0; i < x; ++i) {

  var InfoDiv = document.createElement('div');
  InfoDiv.id = 'Info_Div' + i;
  InfoDiv.className = 'Info_Div';
  InfoDiv.style.width = "100px";
  InfoDiv.style.height = "30px";
  InfoDiv.style.display = "inline-block";

  ArrayInfo.push(InfoDiv);

  ctr.appendChild(InfoDiv);
}

for (i = 0; i < x; ++i) {

  ArrayInfo[i].innerHTML = "div " + i;
}

&lt;div id=ctr&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

我会避免使用 do...while。我也会避免在每个循环上创建一个新的 div。实例化一次，然后克隆（更快）。

var InfoDiv = document.createElement('div');
InfoDiv.id = 'Info_Div';
InfoDiv.className = 'Info_Div';
InfoDiv.style.width = "100px";
InfoDiv.style.height = "30px";
InfoDiv.style.display = "inline-block";

var ArrayInfo = [];
for(var i = 0; i < x; i++) {
    var div = InfoDiv.cloneNode(true);
    div.id += i; // Add number to id
    ArrayInfo.push(div);
}

【讨论】：

【解决方案3】：

ID 必须是唯一的！考虑在每个Info_Div 的末尾添加一个数字来唯一标识它。

还可以考虑使用for loop 而不是do while 循环。

JavaScript 变量的约定是 lowerCamelCase。所以我们也应该解决这个问题。

在您的代码中，将 div 添加到数组中，但未添加到文档中。如果您想将它们添加到 DOM，则必须添加 document.body.appendChild。

您的代码看起来更像这样。

var arrayInfo = []; 
var x = 5;                                           // Or whatever value it is

for (var i = 1; i < x; i++) { 
    var infoDiv = document.createElement('div'); 
    infoDiv.id = 'Info_Div' + i; 
    infoDiv.className = 'Info_Div'; 
    infoDiv.style.width = "100px"; 
    infoDiv.style.height = "30px"; 
    infoDiv.style.display = "inline-block"; 

    arrayInfo.push(infoDiv);
    arrayInfo[i].innerHTML = "div " + i;
    document.body.appendChild(infoDiv);
}

【讨论】：

谢谢大家。我尝试了所有这些，以便我可以解决问题。我无法决定哪个答案是赢家。