How do I append an HTML string containing many nodes directly to an existing DOM element with utmost performance in mind?
<p>My question is if anybody has any ideas in how to append an HTML string containing many nodes directly to an existing DOM element with utmost performance in mind. </p>

<p>Let me explain what I am doing. I am creating a javascript templating script. Right now it is wicked fast. I'm able to render 40,000 multi-array items from JSON as html nodes into the DOM in just over 3 seconds (Chrome 16 running on OSX macbook pro). </p>

<p>After I have parsed the string I insert it into a newly created span tag via .innerHTML and then append that span tag to the DOM. Its bloody quick, efficient and slick, but damn, it just won't work. Why? Because it wraps the nodes with an extraneous tag and this will, undoubtedly in some cases, interfere with CSS and who knows what else. So, I need to be able to append multiple newly created DOM nodes directly under an existing HTML tag.</p>

<p>So I switched from appending the span tag (along with all of its html assigned via innerHTML) to looping through each child node of that span and appending them separate. But, man, is it much slower! It takes almost 20 seconds to render 40,000 entries as opposed to 3 seconds. </p>

<p>And I'm steering clear of jquery for this specific project. And, no, I'm never anticipating having 40,000 items rendered to a page in a real world situation. I'm just doing this to test the speed. I want the script to be absolutely as fast as possible. </p>
