創建div並將div添加到for循環中for循環

我試圖用javascript和數學做一些藝術性的東西，爲此我需要一些隨機的html元素在我的頁面中。創建div並將div添加到for循環中for循環

我在HTML中手動創建div＃mainStage，我想添加div.box 10次，並且我想將不同名稱的5個div添加到每個div.box中。

我複製我的代碼示例在這裏，我只是嘗試這個循環創建元素的方法，但我不能讓它的工作。

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>

來源

2016-03-20 planet360

你的意思是加'span's而不是'div's？正如你上面的例子添加'span's。 – Quantumplate

試試這個：

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++ 
}

當你調用內部for循環，你沒有完成追加元素父所以它運行5次（0 + 5 = 4，技術上0計爲1，因此是的數組是奇怪的），所以你總是得到4，它總是會追加到第一個元素。

代碼：

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

將添加一個文本節點到span你創建的，如果計數less than or equal to它會增加數量，否則它只是輸出一個空字符串。

來源

2016-03-20 21:24:50 faino

謝謝你的觀點，我開發我的方式。 – planet360

嘗試......

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

我搬到了i++進入循環和去除共內環和創建span當剛剛設置的文本。

你上面的代碼會在第一個循環中創建1個span，然後內部循環運行5次，用0-4填充同一個div（因此最後是4）。

來源

2016-03-20 21:06:35 Quantumplate

您的代碼存在的問題是，document.querySelector("span").innerHTML = j;將始終選擇第一個元素as the doc specifies。如果要選擇第n個跨度元素，則必須使用類似於:nth-child的CSS選擇器或使用querySelectorAll函數。

來源

2016-03-20 21:11:05 Loufylouf

創建div並將div添加到for循環中for循環

回答

相關問題