次のJavascriptから1つのカード要素のみを追加できます

Question

次のJavascriptから1つのカード要素を追加できます。助けてください。

var gb = document.getElementById('game-board'); 
var cardCount = document.getElementsByClassName('card'); 
var children = document.createElement('div'); 

var createCards = function() { 
    for (var i = 0; i < 5; i++) { 
    children.className = 'card'; 
    gb.appendChild(children); 
    }; 
}; 

createCards(); 

Answer 1

あなたのコードでは、ループの反復ごとにgbに（children変数に格納されている）同じdivを追加しようとしています。代わりに、各反復のための新しい要素を作成してみてください：

var gb = document.getElementById('game-board'); 
 

 
var createCards = function() { 
 
    for (var i = 0; i < 5; i++) { 
 
    var children = document.createElement('div'); 
 
    children.className = 'card'; 
 
    gb.appendChild(children); 
 
    }; 
 
}; 
 

 
createCards();

.card{ 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid gray; 
 
}

<div id="game-board" ></div>

Answer 2

あなたがループ内で動かし続けるだけ1「子供」の項目があります。それを修正する1つの方法は、追加する前にそれを毎回のクローンを作成することです：

var gb = document.getElementById('game-board'); 
var cardCount = document.getElementsByClassName('card'); 
var children = document.createElement('div'); 

var createCards = function() { 
    for (var i = 0; i < 5; i++) { 
    children.className = 'card'; 
    gb.appendChild(children.cloneNode(true)); 
    }; 
}; 

createCards();