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

Question

Я не уверен, что именно происходит здесь, я думаю, факт, что переменная является объектом jquery.

Это только один раз добавляется, мой вопрос - почему?

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

Хотя это работает, как я предполагаю,

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

Спасибо за вашу помощь!

Answer 1

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

Когда вы используете элемент DOM, он отсоединяет элемент от предыдущего положения. (See Fiddle)

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

При добавлении строки элемент DOM создается так, как он добавляется.

Answer 2

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

Answer 3

В первом случае $ проанализирует ваш 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());