jQuery多次追加一个Object

我不确定这里究竟发生了什么，我认为变量是一个jquery对象。

这只追加一次，我的问题是为什么？

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

虽然这可行，但我认为

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

谢谢您的帮助！

Answer 1

当你执行$('') ，jQuery会为你创建一个input DOM元素。

当你.append()一个DOM元素时，它会将元素与之前的位置分离。 （见小提琴） 。 来自文档 ：

如果以这种方式选择的元素被插入到DOM中其他位置的单个位置，则它将被移动到目标中（未克隆）。

因此，您的第二个.append()调用将从首先附加它的位置将其删除并将其放在新位置。

附加字符串时，DOM元素会在追加时创建。

Answer 2

在第一种情况下， $将解析您的html并创建一个新的jQuery对象，它将包装HTMLInputElement 。

基本上，它就像做：

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

在第二种情况下，它每次都在解析html，为每个实例生成一个不同的jQuery对象。

以下是第一个样本的修复方法：

 var newInput = $(''); $('#newDiv').append(newInput); $('#newDiv').append(newInput.clone()); 

Answer 3

这是因为在第一种情况下，它引用相同的元素对象 （附加相同的元素，因此它附加到新的位置），在第二种情况下，您将html附加为字符串，因此它附加多个元素（每次都是新元素）。