JQuery Добавление объекта несколько раз

Ответ 1

Когда вы делаете $('<input/>'), jQuery создает для вас input DOM-элемент.

Когда вы .append() элемента DOM, он отсоединяет элемент от своей предыдущей позиции. (См. Скрипку). Из документов:

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

Таким образом, ваш второй .append() удалит его из того места, где он был добавлен первым, и поместит его в новую позицию.

Когда вы добавляете строку, элемент DOM создается так, как он добавляется.

Ответ 2

В первом случае $ проанализирует ваш html и создаст новый объект jQuery, который будет перенесен поверх HTMLInputElement.

В принципе, это нравится делать:

var $newDiv = $('#newDiv'),
    newInput = document.createElement('input');

$newDiv.append(newInput);
$newDiv.append(newInput);

Во втором случае он каждый раз анализирует html, генерируя для каждого экземпляра другой объект jQuery.

Здесь, как можно было бы исправить первый образец:

var newInput = $('<input/>');
$('#newDiv').append(newInput);
$('#newDiv').append(newInput.clone());

Ответ 3

Это связано с тем, что в первом случае это относится к тому же элементу object (добавляет один и тот же элемент, поэтому добавляется к новому месту), а во втором случае вы добавляете html в качестве строки, чтобы он добавлял несколько элементов (новый элемент каждый раз).

Ответ 4

Вы можете добавить несколько элементов, создавая новые элементы несколько раз с помощью цикла:

<!-- begin snippet: js hide: false console: true babel: false -->

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