如何用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？

回答

相關問題