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可能是一个非常大的数字。

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

我试过了：

ArrayInfo[i].innerHTML = "something";

但它不起作用。

Answer 1

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

其次，您实际上将<{em>} 任何div添加到文档中 - 创建它们并不适合您。

正如评论中所述，您无法一遍又一遍地使用相同的id。

＆＃13;

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

＆＃13;

<div id=ctr></div>

＆＃13;

Answer 2

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

Answer 3

我会避免使用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);
}

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

3 个答案: