Search Engines & Marketing
Website Usability
Programming & Technology Analysis
Programming Tips & Tricks
JavaScript Client-side Include
Simply create a function on an external JS file that populates the HTML of the page by using the document.getElementById() function.
It may be a little work to get the content populated, but you'll only have to do it once!
The line numbers referenced below are for the source code for this page.
This is from the include file:
function setContent(id)
{var str;
str = "<table width=300 height=80 border=0>"
str += "<tr><td class=mainCopy><i>Looking to create a client-side include? "
str += "This is a little trick I worked out to avoid having to duplicate content (I'm sure I'm not the first).</i>"
str += "</td></tr></table>"
document.getElementById(id).innerHTML = str;
}
Include the javascript file - The best spot is in your <head> tag, but it will work anywhere as long as it appears before you call the function.
(line 88):
<script language=javascript src="includes/jsinc.js" type="text/javascript"></script>Create an element and assign an id (line 92):
<div id="message" style="padding-top:0px;"></div>Then just call the function at the bottom of the page (line 121) - or include it in the body onload event:
<script language=javascript>
setContent('message')
</script>
That's it.Nothing fancy, but it's great to have when you need an include on a static HTML page.