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は場所を設定しているだけです。したがって、1つの要素を作成してから、それを同じ場所に何度も移動します。代わりに、多くの要素を作成し、それぞれに1回ずつ場所を設定します。

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

または代わりに（短くても柔軟性が低く、これは1回限りの場合にのみ使用してください）

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 に答える