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?

[haku]

Sorry, your questions are not fully clear, so my answers are based on what I am inferring your questions to be.

 

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?

 

There are a couple ways to do this. In the method I use, I actually do include the div into the source code, but I use CSS to set the display to none, so that the element cannot be seen:

 

html:

<div id="targetdiv" class="hidden">some text that should only be viewable when javascript is on</div>

css:

.hidden
{
   display: none;
}

 

At this point there is a div in the source markup, but when the user loads the page, the div cannot be seen and takes up zero space. I then use javascript to change the div from hidden to visible:

 

javascript:

window.onload = function()
{
   var target = document.getElementById("targetdiv")
   if(document.implementation && document.implementation.createDocument) // for firefox
   {
      target.setAttribute("class", null)
   }
   else //for IE
   {
      target.className = null
   }
}

In the bove code, when the window loads, it changes the the class name of the div from 'hidden' to 'null', meaning that the div is now visible.

 

Method two:

If you really don't want to have the div in your original code whatsoever, then you can just create a div and append it to the parent div:

 

html:

<div id="parentdiv"></div>//this is the div we want the new div to be inside

javascript:

window.onload = function()
{
   var newdiv = document.createElement("div")
   var target= document.getElementById("parentdiv")
   target.appendChild(newdiv)
}

This will create a new div and append it inside the parent div when the page is loaded. You will have to add attributes if you want an id, class, and/or contents insde the appended div. You will also have to change the code if you don't want it to be the top div inside the parent div.

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

In your original source code, set the href as the one you want when javascript is OFF. I'm using google.co.uk as it was the example you gave. Let's say that if javascript is on, you want to go to yahoo.co.uk.

html:
[code]<a href="http://www.google.co.uk" id="targetlink">link</a>

 

You can now use javascript so that it it is loaded, the user will instead be forwarded to yahoo and not google:

 

javascript:

function setHref()
{
   var target = document.getElementById("targetlink")
   target.onclick = function()
   {
      window.location = "http://www.yahoo.co.uk"
      return false
   }

window.onload = function()
{
   setHref()
}

 

What this javascript does is create a function (setHref) that watches for the link (targetlink) to be clicked, and when it is clicked, forwards the user to the address inside the function. But this function needs to be called, so when the page has loaded, javascript calls this function.

 

Good luck![/code]

[wrongmove18]

Me too..

I don't understand your question.

 

You need to turn ON Javascript.

 

If your just trying to hide/show a div in the website.

  <div id="DIV_ID"><!--Content here...--></div><button onclick="toggle('DIV_ID');">Toggle DIV</button>
  <script type="text/javascript">
     function toggle(idname){
       var d = document.getElementById(idname).style.display;
       d = (d=="none")?"block":"none";
     }
  </script>