If you ever find yourself appending a series of elements to the DOM, you should always use a DocumentFragment to do just that.

A DocumentFragment is a minimal document object that has no parent. It is used as a light-weight version of document to store well-formed or potentially non-well-formed fragments of XML. https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

Why? Not only is using DocumentFragments to append about 2700 times faster than appending with innerHTML, but it also keeps the recalculation, painting and layout to a minimum.

TL;DR: Use DocumentFragments. http://jsperf.com/document-fragment-vs-innerhtml-vs-looped-appendchild

When normally we would do this to append elements:

var i = 0; while (i < 200) { div.innerHTML += '<li>My list item #' + i + '</li>'; i++; }

doing this would be much faster (although not optimal):

var i = 0; while (i < 200) { var el = document.createElement('li'); el.innerText = 'This is my list item number ' + i; div.appendChild(el); i++; }

However, this solution suffers from recalculation of styles, painting and layout - a lot of it - something you should be very wary about when building performant web apps.

Read more about recalculation of styles, painting and layout here: http://stackoverflow.com/questions/11623299/what-does-recalculate-layout-paint-mean-in-chrome-developer-tool-timeline-record

Wouldn't it be great if there was some way to bypass recalculating, painting and layout for every single element we added, and rather have it just happen once? There is!

var el; var i = 0; var fragment = document.createDocumentFragment(); while (i < 200) { el = document.createElement('li'); el.innerText = 'This is my list item number ' + i; fragment.appendChild(el); i++; } div.appendChild(fragment);

Instead of appending the elements directly to the document when they are created, append them to the DocumentFragment instead, and finish by adding that to the DOM.

Now there's only one (big) DOM change happening, and because of that we're also keeping the recalculation, painting and layout to an absolute minimum.