So, how to get the string of the html of a Range or DocFrag? Contrary to the other responses, it is possible to directly turn a DocumentFragment object into a DOMString using the XMLSerializer.prototype.serializeToString method described at https://w3c.github.io/DOM-Parsing/#the-xmlserializer-interface. To get the DOMString of a Range object, simply convert it to a DocumentFragment using either of … Read more
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
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