Partial render in HTML/JavaScript

Question

I have some HTML files, and each one of them I want to partially render in another HTML file, for example header.html and footer.html in order to observe DRY concept.

HTML files should look like this:

<!--render header.html--> <div>     Content </div> <!--render footer.html--> 

How can I do that?

Answer 1

If you're just using plain HTML and Javascript, you could include jQuery and use an AJAX request to load the contend of another HTML page in your main page.

Have a look at the jQuery 'load()' function here:

http://api.jquery.com/load/

Assuming your have the following html:

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

your usage would look something like this:

$('#header').load('header.html'); $('#footer').load('footer.html');