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());