This is something I’ve always had lingering at the back of my mind. As any JS developer knows, changing the contents of the DOM is slow since it causes a reflow (and often a repaint) of the web page. But what if you need to insert multiple nodes into a page? I confess I’ve always simply done it in a loop – which is horrendous from an efficiency point of view.

Resig suggests an alternate approach: using a document fragment to bundle together the nodes, then do a single insert.

Very handy technique.

http://ejohn.org/blog/dom-documentfragments/