如何添加多个div使用的appendChild？(How to add multiple divs

我试图使用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:

随着TJ-克劳德已经指出的那样，OP的代码只创建一个DIV。 但是，对于Google员工，有追加一个单一的多元素的方法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:

虽然什么TJ克罗德写入工作得很好，我会推荐它重写下面的代码，使用的DocumentFragment，像雷纳托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> 

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; I <2;我++）

文章来源: How to add multiple divs with appendChild?