Как добавить несколько div с appendChild?

Question

Я пытаюсь создать шахматную доску с помощью javascript и создать с ней 64 div.
Проблема в том, что он создает только первый div.
Вот код:

div { 
    width: 50px; 
    height: 50px; 

    display: block; 
    position: relative; 
    float: left; 
} 

<script type="text/javascript"> 
    window.onload=function() 
    { 
     var i=0; 
     var j=0; 
     var d=document.createElement("div"); 

     for (i=1; i<=8; i++) 
     { 
      for (j=1; j<=8; j++) 
      { 
       if ((i%2!=0 && j%2==0)||(i%2==0 && j%2!=0)) 
       { 
        document.body.appendChild(d); 
        d.className="black"; 
       } 
       else 
       { 
        document.body.appendChild(d); 
        d.className="white"; 
       } 
      } 
     } 
    } 
</script> 

Answer 1

Проблема заключается в том, что он создает только первый DIV.

Правильно, потому что вы только создали один div. Если вы хотите создать более одного, вы должны позвонить createElement более одного раза. Перемещайте

d=document.createElement("div"); 

линии вj петли.

Если вы звоните appendChild, проходя мимо элемента, который уже находится в DOM, это перемещено, а не копировано.

window.onload=function() 
    { 
     var i=0; 
     var j=0; 

     for (i=1; i<=8; i++) 
     { 
      for (j=1; j<=8; j++) 
      { 
       if ((i%2!=0 && j%2==0)||(i%2==0 && j%2!=0)) 
       { 
        var d=document.createElement("div"); 
        document.body.appendChild(d); 
        d.className="black"; 
       } 
       else 
       { 
        var d=document.createElement("div"); 
        document.body.appendChild(d); 
        d.className="white"; 
       } 
      } 
     } 
    } 

Answer 2

Как заметил t-j-crowder, код OP создает только один div. Но для гуглеров есть один способ добавить несколько элементов с одним appendChild в DOM: создав documentFragment.

function createDiv(text) { 
    var div = document.createElement("div"); 
    div.appendChild(document.createTextNode(text)); 
    return div; 
} 

var divs = [ 
    createDiv("foo"), 
    createDiv("bar"), 
    createDiv("baz") 
]; 

var docFrag = document.createDocumentFragment(); 
for(var i = 0; i < divs.length; i++) { 
    docFrag.appendChild(divs[i]); // Note that this does NOT go to the DOM 
} 

document.body.appendChild(docFrag); // Appends all divs at once 

Answer 3

Несмотря на то, что T.J. Crowder пишет отлично, я бы рекомендовал переписать его на код ниже, используя documentFragment, как предложил Ренато Заннон. Таким образом, вы будете только писать в DOM один раз.

window.onload = function() { 
 
     var count = 5, 
 
      div, 
 
      board = document.getElementById('board'), 
 
      fragment = document.createDocumentFragment(); 
 
     
 
     // rows 
 
     for (var i = 0; i < count; ++i) { 
 

 
      // columns 
 
      for (var j = 0; j < count; ++j) { 
 
       div = document.createElement('div'); 
 
       div.className = (i % 2 != 0 && j % 2 == 0) || (i % 2 == 0 && j % 2 != 0) ? 'black' : 'white'; 
 
       fragment.appendChild(div); 
 
      } 
 
     } 
 
     
 
     board.appendChild(fragment); 
 
    };

#board { 
 
    background-color: #ccc; 
 
    height: 510px; 
 
    padding: 1px; 
 
    width: 510px; 
 
} 
 

 
.black, 
 
.white { 
 
    float: left; 
 
    height: 100px; 
 
    margin: 1px; 
 
    width: 100px; 
 
} 
 

 
.black { 
 
    background-color: #333; 
 
} 
 

 
.white { 
 
    background-color: #efefef; 
 
}

<div id="board"></div>

Answer 4

function crt_dv(){ 
dv=document.createElement('div'),document.body.appendChild(dv) 
}; 

crt_dv(),dv.className='white';crt_dv(),dv.className='black'; 

использовать также: для (I = 0; я < 2; я ++)