Question

I’m developing a web form, where I want different inputs to appear depending on what the user previously selects. So I was wondering what’s the difference between having an empty div and changing what it contains with innerHTML vs. having several div elements, setting the display to none, and changing which to show up depending on the user input.

Thanks!

Answer 1

It is almost always far more efficient to hide and show elements as required, rather than creating them and then destroying them.

This is principally because adding nodes to the document is a computationally expensive operation, even though innerHTML is highly optimised. Secondarily, it is because destroying elements also means you destroy any event handlers stored on those elements, which means you have to rebind them, which naturally takes time and unnecessary code.

Another advantage is that Javascript won’t work if the user has disabled it or is using a browser that doesn’t support it, e.g. a screen reader. If all your elements are present in your original HTML, the page will at least make some sense to these users.