`for`循环中的`appendChild`只是替换`createElement`创建的项

Question

我用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);
        }
    };
};

我也读过你可以这样做innerHTML,但这让我感到困惑.有没有人对如何使这项工作有更详细的解释？

Answer 1

来自appendChild的MDN:

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

当您附加一个尚在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);
    }
};