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会为你创建一个input DOM元素。

当您的DOM元素为.append()时，它将元素从其先前的位置分离。 (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());