JSコンテナ内でforループを使ってdivを作成する

-1

コンテナ内に複数のdivを作成しようとしていますが、作成したdivをメインコンテナ内にネストする方法がわかりません。 htmlの前にコンテナを作成することも可能ですか？JSコンテナ内でforループを使ってdivを作成する

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を適用して、必要に応じて表示することができます。 mainContainer内部

その後javascriptの巣へのdiv要素：すべての助けを

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）で作成することもできます。必要に応じて、最初に（JavaScriptなしで）HTMLで作成し、必要に応じて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コンテナ内でforループを使ってdivを作成する

答えて

関連する問題