javascript `for` 循环中的 `appendChild` 仅替换由 `createElement` 创建的项目

`appendChild` inside a `for` loop just replaces item created by `createElement`

提问by Cammy

I Googled a lot about creating multiple items with appendChild, but I'm not understanding how it works. My appendChildjust replaces instead of adding many.

我在 Google 上搜索了很多关于使用 来创建多个项目的信息appendChild，但我不明白它是如何工作的。我appendChild只是替换而不是添加很多。

var startGame;
var cards = 16;
var newDeck = [];

startGame = function(){
    var startBtn = document.getElementById('start');
    var board = document.getElementById('game-board');
    var backside = document.createElement("div");
    backside.className = 'card';

    startBtn.onclick = function(){
        removeButton = document.getElementById("start");
        removeButton.parentNode.removeChild(removeButton);

        for(var i = 0; i < cards; i++){ 
            board.appendChild(backside);
        }
    };
};

I also read you can do this with innerHTML, but that leaves me confused as well. Does anyone have a more detailed explanation on how to make this work?

我还读到你可以用 来做到这一点innerHTML，但这也让我感到困惑。有没有人对如何进行这项工作有更详细的解释？

回答by Denys Séguret

From the MDN on appendChild:

从appendChild 上的 MDN：

Adds a node to the end of the list of children of a specified parent node. If the node already exists it is removed from current parent node, then added to new parent node.

将节点添加到指定父节点的子节点列表的末尾。如果该节点已存在，则将其从当前父节点中删除，然后添加到新的父节点中。

When you append an element that is yet in the DOM, you move it from its old place. Create the element in the loop :

当您附加一个尚在 DOM 中的元素时，您将它从原来的位置移开。在循环中创建元素：

startBtn.onclick = function(){
    removeButton = document.getElementById("start");
    removeButton.parentNode.removeChild(removeButton);

    for(var i = 0; i < cards; i++){ 
        var backside = document.createElement("div");
        backside.className = 'card';
        board.appendChild(backside);
    }
};

回答by Ben McCormick

You're creating a single element and trying to re-add it multiple times. You need to create multiple elements.

您正在创建一个元素并尝试多次重新添加它。您需要创建多个元素。

When you run document.createElement that creates the element in the DOM. AppendChild is just setting the location. So you create one element and then move it to the same place many times. You want to instead create many elements and set their location once each

当您运行在 DOM 中创建元素的 document.createElement 时。AppendChild 只是设置位置。所以你创建了一个元素，然后将它多次移动到同一个地方。您想要创建许多元素并每个设置一次它们的位置

var backside;
startBtn.onclick = function(){
    removeButton = document.getElementById("start");
    removeButton.parentNode.removeChild(removeButton);

    for(var i = 0; i < cards; i++){ 
        backside = document.createElement("div");
        backside.className = 'card';
        board.appendChild(backside);
    }

or alternatively (shorter but less flexible, only use this for a one-off)

或者（更短但不太灵活，仅用于一次性）

startBtn.onclick = function(){
    removeButton = document.getElementById("start");
    removeButton.parentNode.removeChild(removeButton);

    for(var i = 0; i < cards; i++){ 
        board.appendChild("<div class='card'></div>);
    }