How can you hide a div when CSS is disabled?

Here is the scenario: I have a div which I pre-load into a page and automatically set it's display property to hidden. I use javascript to pop-up said div. The issue is when clients have CSS disabled they can see the DIV, obviously. What is the best way to have the div (or contents of the div) display only when my javascript function is called?

The best way I could think of is passing the raw HTML to a javascript var and then loading all the HTML usin开发者_如何转开发g javascript, however, this is a bit slow(theres a decent amount of HTML) which causes the script to break when it tries to reference DIVs that do not exist yet.

any other more elegant solutions?

Thanks

You can wrap html comment tags around it:

<!-- <div>your stuff, which should be invisible</div> -->

Or remove it completely from the DOM

http://plugins.jquery.com/plugin-tags/html-comments
Maybe, here some related stuff

If CSS is disabled, then the only way to hide the div is to remove it from the DOM.

You can set an inline style on the div (not recommended but your case is an exception anyway).

You can use JS/jQuery on page load to hide the div but it'll cause the flicker effect (div wiil be visible momentarily until the JS runs to hide it).

You want to have a div on your page when the page loads so that users without javascript can see it, perhaps to indicate them that some of the site functionalities require JS to work.

If you need to use that div exclusively with JS then having it already on the page is a bad approach imho. You should create it on the fly, at least the content.

This way you will ensure users without CSS won't see it, while still being able to show it for the rest of the people with JS enabled.

Set the height of the div you wanna hide to zero using javascript.

$('#mydiv').css("height", "0px");