title: Accessing a nested DocumentFragment
body: <p>I can navigate the elements perfectly fine in Chrome's console, but I cannot seem to get a reference to the nested DocumentFragment with <code>childNodes</code> or <code>firstChild</code>.</p>
  
  <p>Here's the code in jsFiddle: <a href="http://jsfiddle.net/Ge8au/2/" rel="nofollow">http://jsfiddle.net/Ge8au/2/</a></p>
  
  <p>Here's the code:</p>
  
  <pre><code>function withoutJquery(html)
  {
      var temp = document.createElement("div");
      temp.innerHTML = html;
  
      var fragment = document.createDocumentFragment();
      var child;
  
      while (child = temp.firstChild)
      {
          fragment.appendChild(child);
      }
  
      return fragment.firstChild;
  }
  
  
  function withJquery(html)
  {
      var fragment = document.createDocumentFragment();
  
      fragment.appendChild( jQuery.buildFragment([html],document) );
  
      return fragment.firstChild;
  }
  
  
  var ajaxHTML = "";
  ajaxHTML += "&lt;template&gt;\n";
  ajaxHTML += "    &lt;div&gt;asdf&lt;/div&gt;\n";
  ajaxHTML += "    &lt;div&gt;\n";
  ajaxHTML += "        &lt;span&gt;asdf&lt;/span&gt;\n";
  ajaxHTML += "    &lt;/div&gt;\n";
  ajaxHTML += "&lt;/template&gt;";
  
  
  // Gives the &lt;template&gt;
  console.log( withoutJquery(ajaxHTML) );
  console.log( withJquery(ajaxHTML) );
  
  // Where are the &lt;div&gt;'s?
  console.log( withoutJquery(ajaxHTML).childNodes.length );
  console.log( withJquery(ajaxHTML).childNodes.length );
  </code></pre>