JS與創造的div for循環內部容器

-1

我想創建一個數一個容器內的div，但我無法弄清楚如何嵌套在主容器內創建的。在html中創建容器之前是否可以或更好？JS與創造的div for循環內部容器

function createDiv(numberOfDivs) { 
    var i = 0; 
    var newElement = []; 
    var mainContainer = document.createElement('div'); 

    mainContainer.innerHTML = 'MAIN CONTAINER'; 
    mainContainer.className = 'main'; 
    document.body.appendChild(mainContainer); 

    for (i; i < numberOfDivs; i++) { 
    newElement[i] = document.createElement('div'); 
    newElement[i].style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16); 
    newElement[i].className = 'box'; 
    newElement[i].id = (i + 1); 
    newElement[i].textContent = 'this is div number: ' + (i + 1); 
    document.body.appendChild(newElement[i]); 
    } 
}; 

createDiv(10);

來源

2016-11-20 HendrikEng

您可以在html中創建容器並且不顯示它們。然後，你只需要在JS加個班，使他們看到 – theoretisch

可能重複的[3000米生成程序上的正方形（http://stackoverflow.com/questions/40707643/generate-3000-squares-procedurally） –

的可能重複： http://stackoverflow.com/questions/40707643/generate-3000-squares-procedurally/40707772#40707772 –

是的，你可以創建在未來時間的HTML容器，如其他人所說。然後，您可以將您的div嵌入該容器中。

<html><body><div id="mainContainer" ></div></body></html>

正如其他建議您可以將必要的CSS來隱藏它，如果有必要，直到你想要它是可見的。

然後JavaScript來div的嵌套裏面mainContainer上：

function createDiv(numberOfDivs){ 
    var $mainContainer = $("#mainContainer"); 
    for (i; i < numberOfDivs; i++) { 
     var newDiv = $("<div class='box' />"); 

     //...you can add whatever attributes to the div that you want... 

     $mainContainer.append(newDiv); 
    } 
}

來源

2016-11-20 20:48:50

感謝您的幫助，只是看到它，但我儘量避免jquery不惜一切代價。但主容器的附加幫助:) – HendrikEng

如果可以的話，你應該不使用JavaScript創建它們。否則，您將新元素附加到document.body。只需將其更改爲mainContainer即可。

來源

2016-11-20 20:35:28 Taplar

新元素可以DOM的之外進行，並且然後在最後一次加入。 –

這反映了我的評論關於瞄準錯誤的元素追加到？ – Taplar

它不。但是：*如果可以，您應該創建它們而不使用javascript。*不正確。 –

您可以通過JavaScript（.appendChild）創建它們。如果你願意，你可以在你的HTML首先創建它們（沒有JavaScript），使它們隱藏起來，如果它通過display: none例如有必要，然後使其可見添加display: block。

來源

2016-11-20 20:36:42

感謝所有幫助下，鏈接到另一個話題幫助我只是忘了孩子的追加到mainContainer上。

function createDiv(numberOfDivs) { 
    var i = 0; 
    var newElement = []; 
    var mainContainer = document.getElementById('main'); 

    for (i; i < numberOfDivs; i++) { 
    newElement[i] = document.createElement('div'); 
    newElement[i].style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16); 
    newElement[i].className = 'box'; 
    newElement[i].id = (i + 1); 
// newElement[i].textContent = 'this is div number: ' + (i + 1); 
    mainContainer.appendChild(newElement[i]); 
    } 
}; 

createDiv(10);

來源

2016-11-20 20:50:26 HendrikEng

JS與創造的div for循環內部容器

回答

相關問題