title: Best way to create nested HTML elements with jQuery
body: <p>If I need to create a couple of nested DOM elements, I know one way to do it, is to write them as long string and then place them in the document using a suitable jQuery function. Something like:</p>
  
  <pre><code>elem.html(
  '&lt;div class="wrapper"&gt;
      &lt;div class="inner"&gt;
          &lt;span&gt;Some text&lt;span&gt;
      &lt;/div&gt;
      &lt;div class="inner"&gt;
          &lt;span&gt;Other text&lt;span&gt;
      &lt;/div&gt;
  &lt;/div&gt;'); 
  </code></pre>
  
  <p>This way is obviously not the cleanest. The sting doesn't take too long to get messy and editing becomes a problem. I much more prefer this notation:</p>
  
  <pre><code>$('&lt;div&gt;&lt;/div&gt;', {
      class : 'inner'
  })
  .appendTo( elem );
  </code></pre>
  
  <p>The problem is I don't know how to implement it efficiently when creating nested elements on the fly like above. So if there is way to do the 1st example with the 2nd notation, I'll be glad to learn about it.</p>
  
  <p>Basically, the question is, whats the best way to create nested HTML elements on the fly, without having to deal wit messy long strings?</p>
  
  <p><em>Note : I am aware of templating engines. However this is a question concerning the creation of just a couple of HTML elements on the fly. Like while building the DOM dependencies for a plugin or similar cases.</em></p>