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 is a jQuery object, and I can set div1 and div2 with it separately just like I can assign one variable's value to many other variables in programming languages.

基于这样的理解，我的期望是:

<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语言中，不同的变量可以引用相同的内存地址。这两个引用有什么区别？

Answer 1

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

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

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