div oluşturmak ve döngüler için döngüler için içine ilaveler eklemek

Question

javascript ve matematik ile bazı sanatsal şeyler yapmaya çalıştım ve bunun için sayfamda bazı Rastgele html öğeleri gerekir.

HTML'de el ile # mainStage yaratıyorum, div.box 10 kere eklemek istiyorum ve her div.box'a farklı adlarla 5 div eklemek istiyorum.

Kodlarım örnekimi buraya kopyalarım, sadece bu döngüyü create element yöntemiyle deneyin, ancak çalışamıyorum.

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

    } 

Benim HTML Çıktı olduğu; Ben döngüye i++ taşındı ve tamamen iç döngü kaldırıldı ve span oluştururken sadece metin kurdum

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

<div id="mainStage"> 

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

</div> 

Answer 1

bu deneyin: Eğer iç for döngü çağırdığınızda

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

, sen ebeveyne ekleme elemanları bitmedi o 1 olarak 5 kez (0 + 5 = 4, teknik olarak 0 adet çalışır öylesine evet diziler tuhaftır, bu yüzden her zaman 4 alırsınız ve her zaman ilk öğeye eklenir.

kodu:

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

için bir metin düğümü ekler misin span oluşturmuş ve sayım less than or equal to ise o başka o olacak sadece çıkış boş dize numarası katacak.

Answer 2

bu deneyin ....

Yukarıdaki kodunuz, ilk döngüde 1 span oluşturacaktır, daha sonra iç döngü, 0-4 ile aynı divı doldurarak 5 kez çalışır (bundan dolayı 4, sonunda).

Answer 3

Kodunuzdaki sorun, document.querySelector("span").innerHTML = j; öğesinin her zaman as the doc specifies ilk öğeyi seçmesidir. N-th açıklıklı elemanı seçmek isterseniz, :nth-child gibi bir CSS seçicisini kullanmanız ya da querySelectorAll işlevini kullanmanız gerekir.