title: jquery append new div
body: <p>I want do hover in a div, append a new div in body part, some code here. </p>
  
  <p>but my problem is: now it is not append a new div but replace the first all html. Where is the problem? Thanks.  <a href="http://jsfiddle.net/U7QqB/3/" rel="nofollow">http://jsfiddle.net/U7QqB/3/</a>  </p>
  
  <p>JS</p>
  
  <pre><code>jQuery(document).ready(function() {
    $('.click').hover(function(){
      var html = $(this).find('.text').html();   
      $('body').append('&lt;div id="object"/&gt;').html(html).css({'top':'200px','left':'300px','z-index':'10'});
    });
  });
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.click{position:realavite;top:100px;left:300px;}
  .text{display:none;}
  .object{position:absolute;}
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;body&gt;
  &lt;h1&gt;A hover append div text&lt;/h1&gt;
  &lt;div class="click"&gt;
      &lt;img src="http://nt3.ggpht.com/news/tbn/U7Q-7enFr00rUM/1.jpg" /&gt;
      &lt;div class="text"&gt;text&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>