Sorry for being a JavaScript noob, but can anyone please explain why is it remended not to use .innerHTML. When we have something that is faster and easier in form of .innerHTML , why shouldn't we use it ?

Sorry for being a JavaScript noob, but can anyone please explain why is it remended not to use .innerHTML. When we have something that is faster and easier in form of .innerHTML , why shouldn't we use it ?

• javascript

• 1 Who says you shouldn't use it? And what is faster than what? – Steve Commented Aug 29, 2013 at 4:27
• 2 innerHTML works on top of serialized data which is not the way DOM works conceptually. It is relatively easy to mess up something when building large chunks of HTML manually, thus harder to maintain. Also, HTML inside JS is terrifically ugly in the eyes of many seasoned JS developers (and you will surely think the same when you see half of a JS file being HTML mixed with JavaScript). This is why we have JS template engines, and also the Angular framework. But yes, you can put some HTML inside JS without problems functionality-wise (save a couple cases with old IE as answered by @Evan). – Fabrício Matté Commented Aug 29, 2013 at 4:34

1 Answer 1

innerHTML is a sledgehammer. It will blast away the contents of the selected DOM element and replace them with whatever happens to be assigned at the time. This leads to a number of HTML escaping and validation issues.

More importantly, for pages where a large number of events are bound, using innerHTML to append another element will regenerate DOM elements, which means event bindings can get lost.

There are also some issues regarding memory leaks in older versions of IE when elements are removed from the DOM.

With all of that said, I'm not telling you that you shouldn't be using innerHTML. I use it all the time in jQuery when I use $(selector).html(). Sometimes a sledgehammer is the right tool for the job, and when events are delegated properly it won't matter how much the content is reloaded.