Javascript appendChild不追加元素，并且控制台中没有错误

Question

我正在尝试使用JavaScript创建一个16X16的正方形网格。 当我尝试使用开发工具进行故障排除时-控制台中没有错误，但是我尝试添加的div丢失了。 以下是相关的代码段：

 window.addEventListener("onload", function () { var square = document.createElement("div") square.className = "square" var grid = document.getElementById("grid") var make_grid = function(){ var line = 0; while (line < 16){ for (var i = 0; i < 16; i++){ grid.appendChild(square) } line ++; } } }); 

 .square{ width: 100px; height: 100px; border: 1px solid #000; } 

 <div class="container"> <div id="grid"> </div> </div> 

也许我已经看了太久了，但是我无法弄清楚代码/逻辑中的缺陷。

我还应该指出，我知道这些正方形现在不会在一个不错的网格中彼此相邻出现-我还没有为此添加适当的CSS。 在屏幕上至少出现一些问题之后，我想解决该问题。

Answer 1

我在这里至少看到两个问题。

1. 您永远不会调用make_grid函数
2. 您要多次追加相同的元素。 您需要每次创建一个新的，否则将仅移动现有的一个。

还有第三个：

3. 您要监听的事件名称是load not onload

Answer 2

您实际上并没有调用该函数，只需完成声明即可。 加：

make_grid();

在您的函数末尾调用该函数。