How to Make a Div Visible and Invisible with JavaScript?

One way to make a div visible or invisible is with the visibility property.

For instance, if we have a div:

<div>  
  hello world  
</div>

Then we can make it visible with:

const div = document.querySelector('div')  
div.style.visibility = 'visible'

And we can make it invisible with:

const div = document.querySelector('div')  
div.style.visibility = 'hidden'

Make a Div Visible and Invisible with JavaScript with the display Property

Another way to make a div visible or invisible is with the display property.

For instance, if we have a div:

<div>  
  hello world  
</div>

Then we can make it visible with:

const div = document.querySelector('div')  
div.style.display = 'inline';

to make the div display inline with other elements.

And we can write:

const div = document.querySelector('div')  
div.style.display = 'block';

to make it display in its own row.

And we can make it invisible with:

const div = document.querySelector('div')  
div.style.display = 'none';