Shouldn't we use <noscript> element?

It's better to have the default be non-javascript, and then let a javascript code overwrite with a javascript enabled page. Doesn't have to be much. Can just be a display:none; block, which is then set to display:block; by javascript, and vice versa for the non-js page.

After pondering for many days and changing my code back and forth, I think I have clearer picture now and would like to share my two cents worth on the subject before I forget.

<div id='noscript'>show non-js content</div>
<script>document.getElementById('noscript').style.display='none';</script>
<script id='required script'>show js content</script>

vs

<noscript>show non-js content</noscript>
<script id='required script'>//show js content</script>

Depending on the situation, there are three cases for consideration:

Case 1 - If required script is inline

JavaScript disabled

• Content in <noscript> element appears immediately, non-js content is shown
• Content in <div> element appears immediately, non-js content is shown

JavaScript enabled

• Content in <noscript> element does not appear at all, js content shown
• Content in <div> element may momentarily appear before being hidden, js content shown

For this case, using <noscript> element is advantageous.

Case 2 - If required script is from external (third-party) source, but hiding of <div> element is done with inline script

JavaScript disabled

• Content in <noscript> element appears immediately, non-js content is shown
• Content in <div> element appears immediately, non-js content is shown

JavaScript enabled but required script is blocked

• Content in <noscript> element does not appear at all, nothing is shown!
• Content in <div> element may momentarily appear before being hidden, nothing is shown!

JavaScript enabled and required script is received

• Content in <noscript> element does not appear at all, js content shown
• Content in <div> element may momentarily appear before being hidden, js content shown

For this case, using <noscript> element is advantageous.

Case 3 - If required script hides the <div> element

JavaScript disabled

• Content in <noscript> element appears immediately, non-js content is shown
• Content in <div> element appears immediately, non-js content is shown

JavaScript enabled but required script is blocked

• Content in <noscript> element does not appear at all, nothing is shown!
• Content in <div> element appears, non-js content is shown

JavaScript enabled and required script is received

• Content in <noscript> element does not appear at all, js content shown
• Content in <div> element may momentarily appear before being hidden, js content shown

For this case, using <div> element is advantageous.

In summary

Use <noscript> element if rendering of the HTML content depends on third-party scripts or if the required script is inline. Else, use <div> element and make sure that the required script contains:

document.getElementById('noscript').style.display='none';