Javascript innerHTML

Using Javascript, you can change the content of a certain tag just through basic javascript browser functions. This can be useful for navigation systems, content on a page to display, etc.

Here is an example:

<script type="text/javascript">
function setContent(id,content_id){
var content_box = document.getElementById(id);
var new_content = document.getElementById(content_id);
content_box.innerHTML = new_content.innerHTML;
}
</script>

This is a basic javascript function to set the innerHTML of one id to the innerHTML of another. Now lets make the html in the body of the page.

<p><a href="#" onclick="setContent('box1','box2');">Click here to change the content!</a></p>
<div id="box1">Content #1.</div>
<div id="box2" style="display:none">Content #2.</div>

When you click the link the content will change to #2.

Here is a good example for using navigation bars:

<p><a href="#" onclick="setContent('box','link_1');">Link 1</a> | <a href="#" onclick="setContent('box','link_2');">Link 2</a> | <a href="#" onclick="setContent('box','link_3');">Link 3</a></p>
<div id="box">Navigation details displayed here...</div>
<div id="link_1" style="display:none">Link 1 details.</div>
<div id="link_2" style="display:none">Link 2 details.</div>
<div id="link_3" style="display:none">Link 3 details.</div>

You can view a live working version of these here!

Popularity: 1% [?]