我只能從以下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

您的代碼試圖相同div（存儲在children變量）追加到gb上循環的每一次迭代。嘗試每次迭代，而不是創建一個新的元素：您保留在循環中移動

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「兒童」項目。要解決這個問題的方法之一是每次克隆它追加之前：

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