如何將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> 

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 ...一會兒。 我還要避免在每個循環上創建一個新的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);
}