title: How to perform extensive DOM insertion with jQuery append() (in the correct order)?
body: <p>When I use the jQuery <code>append()</code> method, the resulting HTML output is not in the order I intend.</p>
  
  <p>As you see in the test case below, any time I open a <code>DIV</code> tag without closing it, it is closed nevertheless.</p>
  
  <p>The same goes for the <code>&lt;ul&gt;</code> tag - which was also closed before I expected - I wanted it to be closed after the second <code>&lt;li&gt;</code> tag that is supposed to be nested below it.</p>
  
  <p>What's the best way to build a large block of dynamic HTML in the order it is written?</p>
  
  <pre><code> $('#a').remove(); // remove #a from the dom and re-insert it dynamically
   $("&lt;div id='a'&gt;").insertAfter('div#main');
  
   $('#a').append("  &lt;ul&gt;");
   $('#a').append("    &lt;li&gt;A&lt;/li&gt;");
   $('#a').append("    &lt;li&gt;B&lt;/li&gt;");
   $('#a').append("  &lt;/ul&gt;"); 
   $('#a').append("  &lt;div id='X1'&gt;");
   $('#a').append("    &lt;div id='b'&gt;");
   $('#a').append("      &lt;div id='b1'&gt;&lt;/div&gt;");
   $('#a').append("      &lt;div id='b2'&gt;&lt;/div&gt;");
   $('#a').append("    &lt;/div&gt;");
   $('#a').append("    &lt;div id='c'&gt;");
   $('#a').append("      &lt;p id='c1'&gt;&lt;/p&gt;");
   $('#a').append("    &lt;/div&gt;");
   $('#a').append("  &lt;/div&gt;");
   $('#a').append("  &lt;div id='X2'&gt;B&lt;/div&gt;");
   $('#a').append("&lt;/div&gt;");
  
   &lt;div id="main&gt;
    &lt;div id="a&gt;
     &lt;ul&gt;&lt;/ul&gt; // &lt;ul&gt; tag is closed!?
     &lt;li&gt;A&lt;/li&gt;
     &lt;li&gt;B&lt;/li&gt;
     &lt;div id='X1'&gt;&lt;/div&gt; // div is closed!?
     &lt;div id='b'&gt; // div is closed!?
     &lt;div id='b1'&gt;&lt;/div&gt;
     &lt;div id='b2'&gt;&lt;/div&gt;
     &lt;div id='c'&gt;&lt;/div&gt; // div is closed!?
     &lt;p id='c1'&gt;&lt;/p&gt;
     &lt;div id='X2'&gt;B&lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>