47

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>

4 Answers 4

78

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
2
  • Thanks! Interesting, i'll try this one too.
    – svtslvskl
    Feb 16, 2013 at 12:42
  • 11
    You should always go with documentFragment when adding multiple elements. documentFragment acts as a staging area where you repeatedly add elements and, at last, you add it to the DOM. Repeatedly adding elements to the DOM will cause entire document reflow. See this: ejohn.org/blog/dom-documentfragments
    – Ram Patra
    Dec 13, 2015 at 13:24
33

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";
                }
            }
        }
    }
2
  • @SvyatoslavSykalo: Good deal, glad that helped! Feb 16, 2013 at 12:27
  • 3
    Note this approach will cause page reflow (computation of element's position and geometry) every time you call appendChild(). Use documentFragment (see below) to batch append child.
    – stevemao
    Jul 24, 2016 at 1:33
12

Although what T.J. Crowder writes works fine, I would recommend rewriting it to the code below, using a documentFragment, like Renato Zannon suggested. That way you will only write to the DOM once.

    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>

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

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

Also use: for(i=0;i<2;i++)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.