trouble with setting different html nodes with the same jQuery object
<p>I am using <code>jQuery 1.9.0</code>, and my html is:</p>

<pre><code>&lt;div id='div1'&gt;    
&lt;/div&gt;
&lt;div id='div2'&gt;
&lt;/div&gt;
</code></pre>

<p>my js:</p>

<pre><code>var input = $("&lt;input type='text'&gt;");
$('#div1').html(input);
$('#div2').html(input);
</code></pre>

<p>my understanding of this code is</p>

<blockquote>
  <p>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.</p>
</blockquote>

<p>based on this understanding, what I expect is:</p>

<pre><code>&lt;div id='div1'&gt;
    &lt;input type="text"&gt;
&lt;/div&gt;
&lt;div id='div2'&gt;
    &lt;input type="text"&gt;
&lt;/div&gt;
</code></pre>

<p>but I get:</p>

<pre><code>&lt;div id='div1'&gt;
&lt;/div&gt;
&lt;div id='div2'&gt;
    &lt;input type="text"&gt;
&lt;/div&gt;
</code></pre>

<p>if I just call <code>$('#div1').html(input);</code>, <code>div1</code> would have <code>input</code> element.
why does <code>div1</code>'s <code>input</code> element disappear after calling <code>$('#div2').html(input);</code>?</p>

<p>I know how to bypass this problem, but I am eager to know the reason of this behavior.</p>

<p>thanks in advance!</p>

<p><strong>UPDATE:</strong></p>

<p>I appreciate all the guys who answered this problem sincerely, and I have voted up every answer. I have a clue to this issue now, but I am still wondering why different nodes (<code>div1</code> and <code>div2</code>) can not reference to the same object. In <code>C</code> language, different variables can reference to the same memory address. what's the difference between these two <code>reference</code>?</p>
