Объявление переменных div внутри или снаружи цикла с помощью appendChild

Question

После нескольких лет работы над этим я занимаюсь практикой JavaScript, поэтому прошу прощения, если это глупый вопрос.

Я начал с простого цикла для вывода «Привет, мир!». несколько раз:

for (i = 0; i < 5; i ++){ 
    var div = document.createElement("div"); 
    div.innerHTML = "Hello, world!"; 
    document.body.appendChild(div); 
} 

Это дало мне пять строк «Привет, мир!». Я хотел бы видеть, если код будет работать быстрее, если я переместил объявление переменной из цикла: «Hello, World!»

var div = document.createElement("div"); 
div.innerHTML = "Hello, world!"; 
for (i = 0; i < 5; i ++){ 
    document.body.appendChild(div); 
} 

Я ожидал получить пять строк но я получил только один. Может кто-нибудь объяснить, почему?

Спасибо!

Answer 1

В первом фрагменте вы создаете новый элемент на каждой итерации и добавляете его.

Во втором фрагменте вы создаете элемент , а затем по существу перемещаете его пять раз.

По MDN:

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

Таким образом, вы должны клонировать элемент перед добавлением его с помощью .cloneNode() method:

var div = document.createElement("div"); 
div.innerHTML = "Hello, world!"; 
for (i = 0; i < 5; i ++){ 
    document.body.appendChild(div.cloneNode(true)); 
}