divを作成してforループでforループを使ってdivを追加する

Question

私はjavascriptと数学でいくつかの芸術的なことをやろうとしましたが、私のページにはランダムなhtml要素が必要です。

div＃mainStageをHTMLで手動で作成します。div.boxを10回追加したいと思います。それぞれのdiv.boxに異なる名前の5つのdivを追加します。

ここで私のコードサンプルをコピーしていますが、私はこのループをcreate elementメソッドで試してみましたが、動作させることはできません。

outerloop: 

    for (i = 1; i < maxboxNum;) { 
    var createBox = document.createElement("span"); 
    document.querySelector("#mainStage").appendChild(createBox); 

    innerloop: 
     for (var j = 0; j < 5; j++) { 
     document.querySelector("span").innerHTML = j; 
     } 
    i++ 

    } 

私のHTML出力です。

<div id="mainStage"> 

    <span>4</span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 

</div> 

Answer 1

これを試してください：あなたは内部forループを呼び出すと

var maxboxNum = 10; 
var mainStage = document.querySelector('#mainStage'); 
for (var i = 1; i <= maxboxNum;) { 
    var createBox = document.createElement('span'); 
    createBox.appendChild(document.createTextNode(i <= 5 ? 'Span #' + i : '')); 
    mainStage.appendChild(createBox); 
    i++ 
} 

、あなたはそれはとても1として5回（0 + 5 = 4、技術的には0のカウントが実行されますので、親に要素を追加行われていませんええ、配列は奇妙です）、常に4を取得し、常に最初の要素に追加されます。

コード：

createBox.appendChild(document.createTextNode(i <= 5 ? i : '')); 

がspan空の文字列を作成し、そしてカウントが他に、それは番号を追加しますless than or equal toであれば、それは単に出力意志にテキストノードを追加します。

Answer 2

私はループにi++を移動し、完全に内部ループを削除し、ちょうどspanを作成するときにテキストを設定している

for (var i = 1; i < 10; i++) { 
    var createBox = document.createElement("span"); 
    createBox.innerText = i; 
    document.querySelector("#mainStage").appendChild(createBox); 
} 

...これを試してみてください。

上記のコードでは、最初のループで1スパンが作成され、その後、内側のループが5回実行され、同じdivが0-4で埋められます（したがって、最後に4つあります）。

Answer 3

コードに問題があると、document.querySelector("span").innerHTML = j;は常に最初の要素であるas the doc specifiesを選択します。 n番目のスパン要素を選択する場合は、:nth-childのようなCSSセレクタを使用するか、querySelectorAll関数を使用する必要があります。