Я не уверен, что именно происходит здесь, я думаю, что переменная является объектом jquery.
Это только один раз добавляется, мой вопрос: почему?
var newInput = $('<input/>');
$('#newDiv').append(newInput);
$('#newDiv').append(newInput);
Хотя это работает так, как я предполагал
var newInput = '<input>';
$('#newDiv').append(newInput);
$('#newDiv').append(newInput);
Благодарим за помощь!
Когда вы делаете $('<input/>'), jQuery создает для вас input DOM-элемент.
Когда вы .append() элемента DOM, он отсоединяет элемент от своей предыдущей позиции. (См. Скрипку). Из документов:
Если элемент, выбранный таким образом, вставляется в одно место в другом месте DOM, он будет перемещен в цель (не клонирован).
Таким образом, ваш второй .append() удалит его из того места, где он был добавлен первым, и поместит его в новую позицию.
Когда вы добавляете строку, элемент DOM создается так, как он добавляется.
В первом случае $ проанализирует ваш 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());
Это связано с тем, что в первом случае это относится к тому же элементу object (добавляет один и тот же элемент, поэтому добавляется к новому месту), а во втором случае вы добавляете html в качестве строки, чтобы он добавлял несколько элементов (новый элемент каждый раз).
Вы можете добавить несколько элементов, создавая новые элементы несколько раз с помощью цикла:
<!-- 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>