Subscribe RSS
Comment RSSJavascript innerHTML
April 30, 2009 # 4:46 PM # Code # No CommentUsing 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!
0
Popularity: 1% [?]
This entry was posted by