title: How to correctly use innerHTML to create an element (with possible children) from a html string?
body: <p>Note: I do <strong>NOT</strong> want to use any framework.</p>
  
  <hr />
  
  <h2>The goal is just to create a function that will return an element based on an HTML string.</h2>
  
  <p><br />
  Assume a simple HTML Document like such:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>All functions mentioned are in included the head section and all DOM creation/manipulation is done at the end of the body in a script tag.</p>
  
  <hr>
  
  <p>I have a function createElement that takes a well formed HTML String as an argument. It goes like this:</p>
  
  <pre><code>function createElement(str)
  {
    var div = document.createElement('div');
    div.innerHTML = str;
    return div.childNodes;
  }
  </code></pre>
  
  <p>Now this functions works great when you call it like such:</p>
  
  <pre><code>var e = createElement('&lt;p id="myId" class="myClass"&gt;myInnerHTML&lt;/p&gt;');
  </code></pre>
  
  <p>With the minor (possibly HUGE) problem that the element created isn't a 'true' element, it still has a parentNode of 'div'.  If anyone knows how to fix that, then that would be awesome.</p>
  
  <hr>
  
  <p>Now if I call the same function with a more complex string:</p>
  
  <pre><code>var e = createElement('&lt;p id="myId" class="myClass"&gt;innerHTML&lt;h2 id="h2ID" class="h2CLASS"&gt;Heading2&lt;/h2&gt;&lt;/p&gt;');
  </code></pre>
  
  <p>It creates TWO children instead of ONE child with another child having another child.<br /><br />Once you do div.innerHTML = str.  The innerHTML instead of</p>
  
  <pre><code>`&lt;p id="myId" class="myClass"&gt;innerHTML    &lt;h2 id="h2ID" class="h2CLASS"&gt;Heading2&lt;/h2&gt;    &lt;/p&gt;`
  </code></pre>
  
  <p>turns to<br /></p>
  
  <pre><code>`&lt;p id="myId" class="myClass"&gt;innerHTML&lt;/p&gt;        &lt;h2 id="h2ID" class="h2CLASS"&gt;Heading2&lt;/h2&gt;`
  </code></pre>
  
  <p><hr />
  <strong>Questions:</strong></p>
  
  <ol>
  <li>Can I somehow get an element without a parent node after using .innerHTML?</li>
  <li>Can I (in the case of the slightly complex string) get my function to return ONE element with the appropriate child instead of two elements. [It actually returns three, <code>&lt;p.myClass#myId&gt;</code>,<code>&lt;h2.h2CLASS#h2ID&gt;</code>, and another <code>&lt;p&gt;</code>]</li>
  </ol>