Question

I’m sure that this is a very simple problem, but I have multiple pages each with their own ‘content’ with page navigation at the bottom. Before I start coding a script to generate several different html files who all have head, body, and navigation footer code… how could I have only one instance of the navigation footer and have the links only update the content inside the ‘content’ div?

Answer 1

Very basic example of updating an element’s content via JavaScript:

<div id="content"></div>

<script>
    document.getElementById('content').innerHTML='<b>oh hai</b>';
</script>​​​​​​​​​​​​​

To do it when someone clicks on a link, you’d attach a function to the onclick handler for that link that does the updating and then returns false so the link won’t do it’s usual navigation.

If you don’t want to have all the content loaded into a single file, you can use AJAX to retrieve content dynamically. You may wish to use a library/framework like jQuery to simplify the coding of AJAX interactions.