documentfragment – Make Me Engineer

Does using a document fragment really improve performance?

May 25, 2023 by Tarik

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

Inserting arbitrary HTML into a DocumentFragment

May 23, 2023 by Tarik

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