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');