How to hide parts of HTML when JavaScript is disabled?

sneg_28098 0
Viewed 18661

I'm trying to accommodate users without JavaScript. (By the way, is it worth the effort nowadays?)

In one HTML file I'd like part of it execute if scripts are on, and another part if scripts are OFF.

The <noscript> tag lets me do the former, but how to achieve the latter? How can I mark a part of HTML so that it is not parsed by browser if scripts are off?

noscript html javascript
8 Answers

You could edit the HTML of the page with Javascript 

document.querySelector('div').style.display = 'block';
div {
  display: none;
}
<div>Div</div>
Try it with JS and the without JS.

user_133632640

This makes the content inside the div inaccessible without JS but with JS it adds the content into the div with JS and you can also do that with the CSS. To change the CSS add:

document.querySelector('style').innerHTML = 'div{}';


document.querySelector('div, #div').innerHTML = 'Div';
<div id='div'></div>

user_133632640
Related