title: jQuery .html() method seems to overwrite containing element
body: <p>I'm writing an AJAX function that returns some information to display in a <code>&lt;div&gt;</code>. My code looks like this:</p>
  
  <p>HTML:</p>
  
  <p><code>&lt;div id="basket_summary"&gt;Your basket's empty. Why not add some items to get started?&lt;/div&gt;</code></p>
  
  <p>jQuery (relevant part of ajax call):</p>
  
  <pre><code>success: function(products){
      $('#basket').html(products.basket);
      $('#basket_summary').html(products.summary);
  </code></pre>
  
  <p>I can confirm that the products.summary variable contains the text I want to display.</p>
  
  <p>When I run this code for the first time, it works, but then when I check the source, the <code>&lt;div id="basket_summary"&gt;</code> part is removed, so the second time I call the function, the element doesn't exist anymore. If I include <code>&lt;div id="basket_summary"&gt;</code> in my AJAX return data, it adds it, so I end up with this: </p>
  
  <pre><code>&lt;div id="basket_summary"&gt;
      &lt;div id="basket_summary"&gt;3 items in your basket&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This isn't how the function normally works for me - it doesn't ordinarily touch the containing element. Can anybody figure this out?</p>