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

我试图创建一个应用程序，将掷骰子的数量由用户决定。 我希望每个骰子都在一个单独的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);
}

函数addDice（）{
var div=document.createElement（'div'）；
div.innerHTML=“这里将是一个骰子”
”；
div.getElementById（'dice'）.appendChild（div）；
}

---

但它似乎不起作用。可能我使用了错误的方法。

小字体-使用

document.getElementById（'dice'）.appendChild（div）

而不是

div.getElementById（'dice'）.appendChild（div）

函数addDice（）{
var div=document.createElement（'div'）；
div.innerHTML=“这里将是一个骰子”
”；
document.getElementById（'dice'）.appendChild（div）；
}

加骰子

这是W3C学校的直接课程

函数myFunction（）{
var x=document.createElement（“DIV”）；
var t=document.createTextNode（“这是一个div元素”）；
x、 setAttribute（“样式”，“背景色：粉色；”）；
x、 儿童（t）；
文件.正文.附件（x）；
}

---

使用append.child而不是innerHTML

注意

createTextNode（）

不接受HTML代码。直接使用

innerHTML

应该没有什么问题。不确定，但对象可能还不存在。我以前也有过类似的问题。使用append可以避免可能存在或不存在的任何DOM建立问题。如果他的原始代码不起作用，很可能是因为对象还不存在。对于像我这样的初学者来说，innerHTML现在似乎是一个更容易掌握的概念，而且在我修复了令人尴尬的打字错误后，它似乎起作用了。我明白了。为了便于将来参考，我经常遇到的一个问题是在渲染对象之前尝试与对象联系。这类问题通常是间歇性的，因为有时一个程序比其他程序运行得更快。我认为这可能是您遇到的问题，因此我提出了解决方案。：-）很高兴你能解决你的问题。哦，我的上帝，我不敢相信我看了5分钟，却没有看到这个灰烬。。。非常感谢。

<script>
function myFunction() {
    var x = document.createElement("DIV");
    var t = document.createTextNode("This is a div element.");
    x.setAttribute("style", "background-color: pink;");
    x.appendChild(t);
    document.body.appendChild(x);
}
</script>