Question

I’m trying to use Javascript to load more links in my nav bar.

This is what I tried; I just wanted one link in my nav to load more beneath it.

<a href="" onclick="show()"/>collections</a>
<script type="text/javascript">
function show() {
   document.write("collection 1 <br /> collection 2 <br /> etc... <br />");
}
</script>

Can anybody suggest a relevant tutorial or give me a hint?

Answer 1

document.write should really only be used while the document is loading. Calling it after the document is loaded will clear the current document and write some new content. To add new content to the page, you would need to create new DOM objects and add them to the page or modify existing DOM objects.

Here’s a small example of modifying the page you can see in action here: http://jsfiddle.net/jfriend00/zVS39/

HTML:

<a href="#" onclick="show()">collections</a>
<span id="moreText"></span>

Javascript:

function show() {
    var o = document.getElementById("moreText");
    o.innerHTML = "<br>collection 1 <br /> collection 2 <br /> etc... <br />";
}