Javascript 如何向数组动态添加div？

我想创建几个具有相同选项（如颜色、宽度、高度等）的

div

s

我想将所有这些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);

---

但是它不起作用。

你永远不会增加

i

，所以你的循环永远不会结束

第二，您实际上从未向文档中添加任何

div

s，创建它们并不适合您

如评论中所述，您不能反复使用相同的

id

var ArrayInfo=[]；
var x=10；
var ctr=document.getElementById（'ctr'）；
对于（变量i=0；i

---

你永远不会增加

i

，所以你的循环永远不会结束

第二，您实际上从未向文档中添加任何

div

s，创建它们并不适合您

如评论中所述，您不能反复使用相同的

id

var ArrayInfo=[]；
var x=10；
var ctr=document.getElementById（'ctr'）；
对于（变量i=0；i

---

ID必须是唯一的！考虑在每个

Info\u Div

的末尾添加一个数字以唯一标识它

也考虑使用<代码> for循环<代码>，而不是<代码> do，而<代码>循环.< /p> 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);
}

var arrayInfo=[]；
变量x=5；//或者不管它有什么价值
对于（var i=1；i

ID必须是唯一的！考虑在每个

Info\u Div

的末尾添加一个数字以唯一标识它

也考虑使用<代码> for循环<代码>，而不是<代码> do，而<代码>循环.< /p> 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);
}

var arrayInfo=[]；
变量x=5；//或者不管它有什么价值
对于（var i=1；i

我会避免使用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=“内联块”；
var ArrayInfo=[]；
对于（变量i=0；i

我会避免使用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=“内联块”；
var ArrayInfo=[]；
对于（变量i=0；i

所有这些Div都具有相同的id

Info\u Div

，这是非法的HTML。请详细说明没有起作用。

i

在哪里变化？

i

和

x

的值是什么？如果

i

从未更改，循环将执行1次或无限次。考虑< <代码> > <代码>循环。<代码> ARAYIMP[I]。code>所有这些Div都具有相同的id

Info\u Div

，这是非法的HTML。请详细说明没有起作用。

i

在哪里变化？

i

和

x

的值是什么？如果

i

从未更改，循环将执行1次或无限次。考虑< <代码> > <代码>循环。<代码> ARAYIMP[I]。谢谢大家。我都试过了，所以我可以解决这个问题。我不能决定哪个答案是赢家。谢谢大家。我都试过了，所以我可以解决这个问题。我无法决定哪个答案是赢家。

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