объявление переменных внутри цикла for

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) в цикл и запускаю его на консоли (то есть)

 <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

Это то, что вы ожидаете от переменной.

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 2

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

Answer 3

Полагаю, эта запись из MDN охватывает следующее:

Метод Node.appendChild () добавляет узел в конец списка дочерних элементов указанного родительского узла., Если данный дочерний элемент является ссылкой на существующий узел в документе, appendChild () перемещает его из текущей позиции в новую позицию (нет необходимости удалять узел из его родительского узла перед добавлением егок другому узлу).

Это означает, что узел не может находиться в двух точках документа одновременно.Таким образом, если узел уже имеет родителя, узел сначала удаляется, а затем добавляется в новой позиции