jquery - 使用相同的 jQuery 对象设置不同的 html 节点时遇到问题

Question

我正在使用jQuery 1.9.0，我的 html 是：

<div id='div1'>    
</div>
<div id='div2'>
</div>

我的js：

var input = $("<input type='text'>");
$('#div1').html(input);
$('#div2').html(input);

我对这段代码的理解是

input 是一个 jQuery 对象，我可以用它分别设置 div1 和 div2 ，就像我可以将一个变量的值分配给编程语言中的许多其他变量一样。

基于这种理解，我期望的是：

<div id='div1'>
    <input type="text">
</div>
<div id='div2'>
    <input type="text">
</div>

但我得到：

<div id='div1'>
</div>
<div id='div2'>
    <input type="text">
</div>

如果我只是打电话$('#div1').html(input);，div1就会有input元素。为什么调用后div1的input元素会消失$('#div2').html(input);？

我知道如何绕过这个问题，但我很想知道这种行为的原因。

提前致谢！

更新：

我感谢所有真诚回答这个问题的人，我对每一个答案都投了赞成票。我现在对这个问题有了一个线索，但我仍然想知道为什么不同的节点（div1和div2）不能引用同一个对象。在C语言中，不同的变量可以引用同一个内存地址。这两者有什么区别reference？

score 4 · Accepted Answer

克隆它，以解决引用问题（在下面添加了更多详细信息）:)

var input = $("<input type='text'>");
$('#div1').html(input.clone());
$('#div2').html(input.clone());

发生这种情况的原因是因为 input 是一个 jQuery 对象。将其视为参考。第一次使用输入时，#div1会使用它，但是引用仍在内存中，当您将其添加到#div2它时会重新使用它。

score 2 · Accepted Answer

尝试这个。input可能仅在 DOM 中属于特定节点。同一节点不能同时具有父节点div1和父节点。而是div2 创建一个副本input以将其附加到其他节点

var input = $("<input type='text'>");

$(input).clone().appendTo('#div1');
$(input).clone().appendTo('#div2');

score 1 · Accepted Answer

最重要的是，当您将元素附加到页面的某个位置时，DOM 不会自动克隆您的元素。这不是 jQuery 特定的。

因为input一直引用同一个元素，input稍后附加到另一个元素会将其与之前的位置分离，因此input会在 DOM 中不断移动。

这就是为什么你必须在附加元素之前克隆它:)

score 0 · Accepted Answer

我想这与 JS 的垃圾收集器机制有关。

4 回答 4