如何使用appendChild添加多个div ?

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:

我正在尝试用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>

4 个解决方案

#1

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

问题是，它只创建第一个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

对，因为您只创建了一个div。如果您想创建多个div，那么您必须不止一次调用createElement。移动你的

d=document.createElement("div");

line into the j loop.

进入j循环。

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

如果您调用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";
                }
            }
        }
    }

#2

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.

正如t-j-crowder所指出的，OP的代码只创建了一个div，但是对于googler来说，有一种方法可以在DOM中使用一个appendChild附加多个元素:创建一个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

#3

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.

虽然T.J. Crowder写的很好，但我还是建议把它重写到下面的代码中，使用一个documentFragment，就像Renato Zannon建议的那样。这样，您只会写入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>

#4

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

还使用:(i = 0;我+ +)< 2;