Javascript appendChild 不附加元素，控制台中没有错误答案

【问题标题】：Javascript appendChild doesn't append element and no errors in consoleJavascript appendChild 不附加元素，控制台中没有错误
【发布时间】：2015-05-14 22:01:16
【问题描述】：

我正在尝试使用 javascript 创建一个 16X16 方形网格。当我尝试使用开发工具解决此问题时 - 控制台中没有错误，但我试图附加的 div 丢失了。以下是相关代码sn-ps：

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。我想在我的屏幕上至少出现一些东西之后解决这个问题。

【问题讨论】：

确定它正在运行？ “加载”而不是“加载”

标签： javascript dom dom-manipulation

【解决方案1】：

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

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

第三个：

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

【讨论】：

缺少另一个关于 onload 的问题
谢谢！这真的很有帮助。我对忘记调用 make_grid(); 感到有点愚蠢。 - 我现在将处理第 2 点，我会尽快接受您的回答！

【解决方案2】：

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

make_grid();

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

【讨论】：