title: Appending a DOM element twice (jQuery)
body: <p>Can someone explain why the following snippet does not add <code>&lt;foo&gt;</code> to both <code>#a</code> and <code>#b</code>?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="a"&gt;&lt;/div&gt;
  &lt;div id="b"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(function(){
      var $foo = $("&lt;foo&gt;HI&lt;/foo&gt;");
      $("#a").append($foo);
      $("#b").append($foo);
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/parsa28/sCvs7/">jsfiddle</a></p>
  
  <p>Edit: thanks for the helpful points, the fact that <code>.append()</code> moves the element explains this behavior. Since the element in my application is actually a Backbone View's <code>.el</code>, I prefer not to clone it.</p>