You can view this as a container holding all the node elements that you want to add to the DOM. You store them on this "container" and after you have finished all the changes that you want, you append that container to the DOM. Imagine if you wanted to add 100 div tags if you append them directly the browser would have to rerender the page 100 times, expensive, but if you use documentFragment the browser would need to render only once.
Do you go to the store 100 times to buy 100 things, or do you buy them all at once?
Before var trash = document.getElementById("trash"); // ... Modify trash document.getElementById("target").appendChild(trash); After var trash = document.getElementById("trash"); var frag = document.createDocumentFragment(); frag.appendChild(trash); // ... Modify trash document.getElementById("target").appendChild(frag.cloneNode(true));
PS: this is my first blog post :P