Question

    <script>

   var c = document.body
   var e = document.createElement("div");
   e.className = "box";

   for (var i=0; i<=2; i++) {

     c.appendChild(e);
   }


 </script>

当我运行此for循环时，在浏览器中仅创建一个div。然而，如果我将console.log（e）添加到循环中并在控制台上运行，即（p）

 <script>

   var c = document.body
   var e = document.createElement("div");
   e.className = "box";

   for (var i=0; i<=2; i++) {
     console.log(e);
     c.appendChild(e);
   }

</script>

输出为

"<div class='box'></div>"
"<div class='box'></div>"
"<div class='box'></div>"

我知道我可以通过在for循环中声明变量来解决此问题，但是我不确定为什么上面的第一个代码不起作用？

Answer 1

我认为MDN的this项涵盖：

Node.appendChild（）方法将节点添加到列表的末尾   指定父节点的子节点。 如果给定的孩子是推荐人   到文档中的现有节点，appendChild（）将其从文档中移到   当前职位到新职位（不需要   将节点从其父节点移除，然后再将其附加到其他节点   节点）。

这意味着节点不能位于文档的两点   同时。因此，如果节点已经有一个父节点，则该节点是第一个   删除，然后附加到新位置

Answer 2

这就是您对变量的期望。

e是对创建的div的引用，而不是实际的constructor。因此appendChild只能将element添加到DOM一次，否则将替换它到新位置，因为元素在DOM中是唯一的。当然console.log会列出相同的参考三位。

正如您所说，解决方案是在循环中创建另一个元素：

   for (var i=0; i<=2; i++) {
     const e = document.createElement("div");
     c.appendChild(e);
   }
   document.window.appendChild(c);

Answer 3

<script>
  var div = "<div class='box'></div>";
  for (var i = 0; i <= 2; i++) {
    document.queryselector("body").innerHTML += div
  }
</script>

在for循环中声明变量

3 个答案: