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

来自the MDN on appendChild：

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

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

Answer 2

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

运行在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);
    }

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

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

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

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

2 个答案: