javascript - 如何动态地将div添加到数组中？

Question

我想创建几个具有相同选项(如颜色、宽度、高度等)的 div。

我想将所有这些 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 可以是一个非常非常大的数字。

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

我尝试过这个:

ArrayInfo[i].innerHTML = "something";

但是没有成功。

Answer 1

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

其次，您实际上从未添加任何div到文档中——创建它们并不能为您做到这一点。

正如评论中所述，您不能一遍又一遍地使用相同的 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;
}

<div id=ctr></div>