appendChildで複数のdivを追加するにはどうすればよいですか？

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の1つのみを作成したためです。複数を作成する場合は、createElementを複数回呼び出す必要があります。jループにあなたの

d=document.createElement("div"); 

ラインを移動します。

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のコードでは1つのdivしか作成されません。しかし、Googleでは、複数の要素を単一のappendChildでDOMに追加する方法が1つあります（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.クラウダーの書き込みは問題なく、以下のコードに書き直すことをお勧めします。これは、Renato Zannonが提案したように、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

​​

はまた、使用します（I = 0;私< 2、iは++）のため