如何使用 appendChild 添加多个 div？答案

【问题标题】：How to add multiple divs with appendChild?如何使用 appendChild 添加多个 div？
【发布时间】：2023-04-08 09:27:01
【问题描述】：

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

【问题讨论】：

标签： javascript appendchild

【解决方案1】：

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

【讨论】：

谢谢！有意思，我也试试这个。
添加多个元素时，您应该始终使用documentFragment。 documentFragment 充当临时区域，您可以在其中重复添加元素，最后将其添加到 DOM。反复向DOM 添加元素会导致整个文档重排。看到这个：ejohn.org/blog/dom-documentfragments

【解决方案2】：

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

【讨论】：

@SvyatoslavSykalo：很好，很高兴有帮助！
请注意，每次调用appendChild() 时，这种方法都会导致页面重排（计算元素的位置和几何形状）。使用documentFragment（见下文）批量追加子节点。

【解决方案3】：

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

&lt;div id="board"&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

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

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

同时使用：for(i=0;i

【讨论】：