Question

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

2013-03-26

22930

javascript html dom appendchild createelement

我在 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

来自 MDN 上的 appendChild :

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.

当您附加 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

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

当我运行 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>");
  }
};