S–L–O–W innerHTML?
n some browsers (most notably, Firefox), although innerHTML is generally much faster than DOM methods, it spends a disproportionate amount of time clearing out existing elements vs. creating new ones. Knowing this, we can combine the speed of destroying elements by removing their parent using the standard DOM methods with creating new elements using innerHTML.
When innerHTML isn’t Fast Enough…
innerHTML is more than a simple string. When you inject markup via innerHTML, you’re in fact causing the browser to render (or destroy) a potentially huge amount of elements. This article really hammers home the power of a document’s node structure: instead of deleting thousands of children one by one, delete the parent and can them all in one single action. Very cool method of "improving" innerHTML and scoring a potental performance coup and something to look for to improve code performance.
