jQuery多次追加一个Object

Question

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

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

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

虽然这可行,但我认为

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

谢谢您的帮助!

Answer 1

在第一种情况下,$将解析你的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());

Answer 2

当你这样做时$('<input/>'),jQuery会input为你创建一个DOM元素.

当您.append()使用DOM元素时,它会将元素与其先前位置分离.(见小提琴).来自文档:

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

因此,您的第二个.append()调用将从首先附加的位置将其删除并将其置于新位置.

附加字符串时,DOM元素会在追加时创建.