Append DIV to Page

[Dysan]

Hello! Using JavaScript, how do I append a DIV on to the document/page, so that it's not present in the bare-bones HTML of the website, should JavaScript be turned off in the users browser?

Should JavaScript be turned on, and upon the user clicking a link on the page, how do I show/hide this div.

If JavaScript is disabled, how do I navigate the link to a different page (e.g. google.co.uk) upon being clicked?

[sneakyimp]

To create and append an div tag to your document's BODY, this should do the trick:

elt = document.createElement('div');
document.getElementsByTagName('body')[0].appendChild(elt);

If Javascript is turned off, that won't work. As far as I know, there's no way to append, show, or hide a page element by clicking something if Javascript is turned off.

To show or hide a particular element, you need a variable reference to the element. If the element has an ID like this:

<div id="myDiv">

then you can get a variable reference to the element like this:

var elRef = document.getElementById('myDiv');

NOTE:You can only call document.getElementById after the element in question has been rendered and possibly only when the whole page has been rendered. I think this may vary by browser.

Once you have a reference to the element, you can hide it like this:

elRef.style.display = 'none';

and show it like this;

elRef.style.display = '';

[bretticus]

It is possible to use the css psuedo-class hover to make a DOM object appear when hovered over (same as onmouseover in javascript.)

Below is a non-working example that hopefully gives the idea. 100% pure css website menus have been done using this basic principle. Refer to them for more information: google "css menu" or goto Steve Gibson's website (he didn't invent this but has one working.)

#cat A:link, #cat A:visited, #cat A:active {
VISIBILITY: hidden;
TEXT-DECORATION: none;
}
#cat A:hover {
VISIBILITY: visible;
}

<a id="cat">This is a category that appears</a>

[bretticus]

By the way, you may get better advice, but a cheap way to detect if javascript is turned on is to do a

document.write('<img src="fake_one_by_one_image.php"')

This could be on your "splash"/home page. If the javascript is successful at loading the invisible image (which is really a PHP page that builds/reconstructs a fake image to send back), you can set a session variable (man, if they have cookies turned off too!!!!!) that tells subsequent pages to not render the version of your website with javascript. You could also do the same thing with AJAX. without javascript the ajax never calls a php script that sets the session variable confirming that javascript is enabled. At the most simple, you can use javascript when the page loads that redirects to a javascript version (or just sends a get key/value pair that sets a session variable again) of your site. Lots of ways to test for javascript turned on. Again, the trick is to make javascript do something that your serverside code can observe and use cookies/sessions to keep state for the current user.