如何動態添加div到數組中？

我想和喜歡的顏色，寬度，高度等相同的選項創建幾個div小號如何動態添加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";

但沒有奏效。

來源

2015-12-01 Dave_c

所有這些div都具有相同的id Info_Div，這是非法的HTML。請詳細說明沒有奏效。 –

'i'在哪裏變化？「我」和「X」的價值是什麼？如果'我'永遠不會改變循環將執行1或無限次。考慮一個'for'循環。 –

'ArrayInfo [i] .innerHTML =「something」;'< - 很好是'我'大於數組的長度？ – epascarello

你永遠不會增加i，所以你的循環永遠不會結束。

二，你從來沒有真的添加任何div s的文件 - 創建它們不會爲你做。

正如評論中指出的那樣，您不能一次又一次地使用相同的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>

來源

2015-12-01 20:48:04

ID必須是唯一的！考慮在每個Info_Div的末尾添加一個數字來唯一標識它。

也考慮使用for loop而不是do while循環。

JavaScript變量的約定是lowerCamelCase。所以我們也應該解決這個問題。

在您的代碼中，divs被添加到數組中，但不添加到文檔中。如果你想將它們添加到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); 
}

來源

2015-12-01 20:48:19

謝謝你們。我嘗試了所有這些，以便解決問題。我無法決定哪個答案是贏家。 –

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

來源

2015-12-01 20:49:09

如何動態添加div到數組中？

回答

相關問題