javascript - 在另一个 div 中添加选定数量的 div

Question

我正在尝试创建一个应用程序，它将掷出由用户决定的骰子数量。我希望每个骰子都在一个单独的 div 中，但我很难实现将 div 插入 HTML 的代码。

作为测试，我创建了一个按钮，可以将一个 div 插入到另一个 div 中，这是我目前得到的结果:

<div id="diceTable">
    <button onclick="addDice()">Add Dice</button>
</div>

JS 是:

function addDice(){
var div = document.createElement('div');

div.innerHTML = "<p> here will be a dice</p>";

div.getElementById('dice').appendChild(div);
}

但是好像不行。也许我使用了错误的方法。

Answer 1

小错字 - 使用 document.getElementById('dice').appendChild(div) 而不是 div.getElementById('dice').appendChild(div)。

function addDice() {
  var div = document.createElement('div');
  div.innerHTML = "<p> here will be a dice</p>";
  document.getElementById('dice').appendChild(div);
}

<div id="diceTable">
  <button onclick="addDice()">Add Dice</button>
</div>
<div id='dice'></div>