如何用appendChild添加多个div？

我想做一个使用JavaScript的棋盘，并创建64个div。
问题是，它只创建第一个div。
下面是代码：如何用appendChild添加多个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>

来源

2013-02-16 svtslvskl

的问题是，它仅创建了第一个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"; 
       } 
      } 
     } 
    }

来源

2013-02-16 12:19:37

噢，它看起来我是失明。谢谢，效果很好！ – svtslvskl 2013-02-16 12:23:25

@SvyatoslavSykalo：很好，很高兴帮助！ – 2013-02-16 12:27:25

注意，每次调用appendChild（）时，这种方法都会导致页面重排（元素位置和几何的计算）。使用'documentFragment'（见下文）批量追加子。 – stevemao 2016-07-24 01:33:48

正如t-j-crowder所指出的那样，OP的代码只创建一个div。但是，对于谷歌来说，有一种方法可以在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

来源

2013-02-16 12:29:28

谢谢！有趣的是，我也会试试这个。 – svtslvskl 2013-02-16 12:42:52

添加多个元素时，您应该始终使用'documentFragment'。 'documentFragment'充当一个临时区域，您可以重复添加元素，最后将其添加到'DOM'中。反复将元素添加到'DOM'将导致整个文档重排。看到这个：http://ejohn.org/blog/dom-documentfragments/ – 2015-12-13 13:24:14

虽然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>

来源

2013-11-03 22:45:27 magikMaker

还可以使用：对（I = 0;我< 2;我++）

来源

2016-04-29 11:22:30

如何用appendChild添加多个div？

回答

相关问题