title: Inserting a nested div structure with createDocumentFragment
body: <p>How do you use createDocumentFragment to create seven nested div elements in one hit?</p>
  
  <p>I want to create a container A which contains A1, A2, A3 &amp; A4, and then A2a &amp; A2b within A2. </p>
  
  <p>Note: this is a follow-up question to <a href="https://stackoverflow.com/questions/9598916/speed-efficiency-of-multiple-dom-appendchild">this</a> which explained createDocumentFragment, but not how to nest divs using it. The answer given was as follows (which was helpful as far as it went): </p>
  
  <pre><code>var fragment = document.createDocumentFragment();
  
  function u1(tag, id, className){
      var tag = document.createElement(tag);
      tag.id = id;
      tag.className = className;
      fragment.appendChild(tag); 
  }
  
  // call u1() seven times
  
  document.getElementById('foo').appendChild(fragment);
  </code></pre>
  
  <p>Could someone explain how to nest? The above just adds seven children to 'foo'. I've trawled the web, but to no avail.</p>
  
  <p>Thanks.</p>