How does createElement() work with innerHTML?
<p>I have the following code that pretty much creates a div element and whatever is inside and puts it into </p>

<pre><code>function create(htmlStr) {
    var frag = document.createDocumentFragment(), temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

var fragment = create('&lt;div id="test"&gt;HELLO&lt;/div&gt;');
document.body.insertBefore(fragment, document.body.childNodes[0]);
</code></pre>

<ol>
<li><p>I am, however, confused as to why do we create another 
<code>div</code> <code>temp = document.createElement('div');</code>
If we are already passing <code>&lt;div id="test"&gt;HELLO&lt;/div&gt;</code> to <code>create()</code> function. Seems to me that would create a div within a div (but it doesn't). Or does that just get extracted with <code>temp.firtChild</code>?</p></li>
<li><p>What does <code>temp.innerHTML = htmlStr;</code> do since <code>temp</code> is a <code>div</code>?</p></li>
</ol>
