6

我用谷歌搜索了很多关于创建多个项目的信息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，但这也让我感到困惑。有没有人对如何使这项工作有更详细的解释？

4

2 回答 2

8

来自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);
    }
};
于 2013-03-26T17:40:50.533 回答
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>);
    }
于 2013-03-26T17:41:55.640 回答