点击生成嵌套DIV异常：为何蓝色DIV都在同一个黑色DIV中？

我想写一个点击触发的函数，实现创建的DIV元素内部再嵌套一个DIV。预期效果是显示5组「黑色DIV块包含蓝色DIV块」的结构，但实际运行后，5个蓝色DIV块全部位于同一个黑色DIV块中。请问这是什么原因？

我的代码： #

HTML

<div class="container">
  <button class="btn" id="btn" onclick="createDiv()">click</button>
  <div class="test" id="test">
  </div>
</div>

CSS

.test {
  width: 800px;
  height: 300px;
  background-color: aquamarine;
}

.new {
  width: 100px;
  height: 100px;
  background-color: black;
  display: inline-block;
}

.inside {
  width: 50px;
  height: 50px;
  margin: 0px auto;
  background-color: blue;
  display: inline-block;
}

JavaScript

function createDiv() {
  for (let i = 0; i < 5; i++) {
    let newDiv = document.createElement("div");
    let myDiv = document.querySelector(".test");
    myDiv.appendChild(newDiv);
    newDiv.className = "new";

    let newDiv1 = document.createElement("div");
    let myDiv1 = document.querySelector(".new");
    myDiv1.appendChild(newDiv1);
    newDiv1.className = "inside";
  }
}

原因分析 #

问题出在document.querySelector(".new")这行代码上：querySelector只会返回页面中第一个匹配指定选择器的元素。循环执行时，每次创建内部蓝色DIV，都会找到第一次生成的那个黑色DIV，然后把新的蓝色DIV追加进去，最终所有蓝色块都挤在了第一个黑色DIV里。

修正方案 #

不需要重新查询.new元素，直接用当前循环刚创建的newDiv变量（它本身就指向刚生成的黑色DIV）来追加内部蓝色DIV即可。

修正后的JavaScript代码：

function createDiv() {
  for (let i = 0; i < 5; i++) {
    // 创建外部黑色DIV并添加到容器
    let newDiv = document.createElement("div");
    newDiv.className = "new";
    document.querySelector(".test").appendChild(newDiv);

    // 创建内部蓝色DIV，直接追加到当前的外部DIV中
    let newDiv1 = document.createElement("div");
    newDiv1.className = "inside";
    newDiv.appendChild(newDiv1);
  }
}

内容的提问来源于stack exchange，提问作者Warren Hogan