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>

也许我看这个太久了，但我无法找出我 code/logic 中的缺陷。

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

Answer 1

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

您永远不会调用 make_grid 函数
您多次附加相同的元素。您每次都需要创建一个新的，否则它只会移动现有的。

第三个：

您要监听的事件名称是 load 而不是 onload

Answer 2

您实际上并没有调用该函数，您所做的只是简单地声明它。添加：

make_grid();

到你的函数结束调用函数。

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

Javascript appendChild doesn't append element and no errors in console

javascript

dom

dom-manipulation