Document Fragment is much faster when it is used to insert a set of elements in multiple places. Most answers here point out its un-utility, but this is to demonstrate its strength. Lets take an example. Say we need to append 20 divs in 10 elements with class container. Without: var elements = []; for(var … Read more
All of these answers are rather old, from back when querySelectorAll and querySelector were not widely available. It should be noted that these two functions which accept CSS selectors as parameters do work on DocumentFragments in modern browsers, and should be the preferred way of dealing with the situation in the question. The alternate solutions … Read more
Here is a way in modern browsers without looping: var temp = document.createElement(‘template’); temp.innerHTML = ‘<div>x</div><span>y</span>’; var frag = temp.content; or, as a re-usable function fragmentFromString(strHTML) { var temp = document.createElement(‘template’); temp.innerHTML = strHTML; return temp.content; } UPDATE: I found a simpler way to use Pete’s main idea, which adds IE11 to the mix: function … Read more