How to add multiple divs with appendChild?

Question

I am trying to make a chessboard using javascript and creating 64 divs with it.
The problem is, that it creates only the first div.
Here is the code:

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

As t-j-crowder has noted, the OP's code only creates one div. But, for googlers, there is one way to append multiple elements with a single appendChild in the DOM: by creating a 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 2

The problem is, that it creates only the first div.

Right, because you've only created one div. If you want to create more than one, you must call createElement more than once. Move your

d=document.createElement("div"); 

line into the j loop.

If you call appendChild passing in an element that's already in the DOM, it's moved, not copied.

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";                 }             }         }     }