Hi everyone,
If I have to make a lot of changes to the content of my page, something like adding (div + a + h1 + p + text node) X 10 times, what is better, innerHTML (variable with markup + select element to update + update content) or DOM Manipulation Methods (create every node + append nodes one by one + select element to update + append new content).
I know that innerHTML is less code, some people say that is faster, etc, etc. but innerHTML can have problems with Event handlers. What problems can I have with innerHTML and Event handlers???
Which I should use??? Thanks!!!
If you’re writing to the DOM a lot, it’s best to batch as many of the writes as you can. I believe that in this way, creating one big HTML string and adding it all at once with innerHTML is better in this regard. However, there’s a way to do it with JavaScript’s DOM API as well. You can create a document fragment, attach nodes to that fragment, and then attach the fragment to your DOM. This allows you to run through whatever operation you need to that builds your markup, then adds it all at once. Check out the MDN page for a better explanation and some examples.
I’ll address this part of your question specifically. There aren’t any “problems” with using innerHTML per se—it’s efficient, fast, and direct. Quick & easy. It’s fine to use as long as you’re writing experimental HTML code on your local computer, or as long as you’re manually writing the HTML code that’s being inserted (and not taking it from somewhere else, like a form).
However, it’s not something that you should be using in production code on an actual website that’s deployed to the public at large. One of the biggest risks in using innerHTML is that the HTML you put in there has to be valid—i.e., it shouldn’t be improperly formed with the wrong characters or anything like that, because the HTML code isn’t checked for validity at all. It’s just accepted as-is and replaces whatever was there before it. So theoretically, if the HTML fragment that you’re inserting does happen to be broken, that could end up breaking your whole page.
And that’s only when you’re manually writing your HTML code for yourself—if you’re using innerHTML on a form to update another part of the page, that’s something you absolutely shouldn’t do because that’s a HUGE security risk. Malicious users could easily write up some HTML code to attack your website in that case.
The DOM manipulation methods, on the other hand, don’t pose this kind of security risk and help to make sure that your page stays valid and doesn’t break.