What's wrong with innerHTML?

The innerHTML property is extremely popular because it provides a simple way to completely replace the contents of an HTML element. Another way to do that is to use the DOM Level 2 API (removeChild, createElement, appendChild) but using innerHTML is by far the easiest and most efficient way to modify the DOM tree. However, innerHTML has few problems of its own that you need to be aware of:

Content is replaced everywhere : When you append to (or otherwise modify) innerHTML, all the DOM nodes inside that element have to be re-parsed and recreated.
Preserves event handlers attached to any DOM elements : Setting innerHTML will not automatically reattach event handlers to the new elements it creates, so you would have to keep track of them yourself and add them manually, potentially creating a memory leak on some browsers.
Even if you use +=like "innerHTML = innerHTML + 'html'" still the old content is replaced by html: String concatenation just does not scale when dynamic DOM elements need to be created as the plus' and quote openings and closings becomes difficult to track.

Next : What is Browser Object Model

Related Topics