title: How to create nested DIVs with jQuery?
body: <p>i have this jquery script:</p>
  
  <pre><code>$('#add').click(function(){
      $('&lt;div class="drag" style="left:20px;"/&gt;')
          .text( num++ )
          .appendTo( document.body )
          .css({ 
              top: $( window ).height() - 500 , 
              left:$( window ).width() - 500
          });
  });
  </code></pre>
  
  <p>this will create: <code>&lt;div class="drag" style="left:20px;"/&gt;&lt;/div&gt;</code></p>
  
  <p>what i am interested in creating is this: </p>
  
  <pre><code>&lt;div class="drag" style="left:20px;"/&gt;
      &lt;div class="handle SE"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>if i do this: </p>
  
  <pre><code>...
  $('&lt;div class="drag" style="left:20px;"/&gt;&lt;div class="handle SE"&gt;')
  .text( num++ )
  ...
  </code></pre>
  
  <p>jquery will create 2 separate di'vs and not nested.</p>
  
  <p>any ideas?</p>
  
  <p>thanks</p>