jquery - 用相同的jQuery对象设置不同的html节点的麻烦

我正在使用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);

我对这段代码的理解是


  输入是一个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有什么区别？

最佳答案

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

由于input始终引用相同的元素，因此以后将input附加到另一个元素会将其与先前的位置分离，因此input会在DOM中继续移动。

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