Добавление div с al oop с использованием jquery и установка div в переменную

Question

Мне интересно это поведение. Почему это создает только один div:

let text = 'some text';
let $div = $('<div></div>');
$div.text(text);
for (let x = 0; x < 5; x++) {
  $('article').append($div);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<article></article>

Если я изменю добавление на ("</div>" + text + '</div>');, то получится пять. Кажется, что div перезаписывается в l oop, но не должен ли он каждый раз добавлять новый? Почему перезаписывается?

Answer 1

Экземпляр $div, который вы создадите, будет ссылаться как тот же объект на каждой итерации l oop с .append(). После создания при каждом цикле будет просто обращаться к нему снова, заменяя его на себя , как если бы вы использовали селектор и метод манипулирования содержимым, чтобы каждый раз изменять его. Это можно увидеть, если включить в текст счетчик итераций:

let text = 'some text'
let $div = $('<div></div>')
for (let x = 0; x < 5; x++) {
  $div.text(text + ' ' + x)
  $('article').append($div)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<article></article>

Чтобы создать новый экземпляр объекта, вы можете использовать метод jquery .clone() для создания глубокой копии Это. Это будет каждый раз создавать новый объект.

let text = 'some text'
let $div = $('<div></div>')
for (let x = 0; x < 5; x++) {
  $div.text(text + ' ' + x)
  $('article').append($div.clone())
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<article></article>

Answer 2

Как упоминалось Рори, вы ссылаетесь на тот же элемент <div>, который был создан до начала l oop. Чтобы добавить новый каждый раз, вы можете написать:

let text = 'some text';
for (let x = 0; x < 5; x++) {
  $('article').append('<div>' + text + '</div>');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article></article>

jQuery append() очень универсален, он принимает: элемент DOM, текстовый узел, массив элементов, строку HTML или jQuery объект. Подробности здесь .