How do I use small html markup repeatedly?

Question

I am working on standalone JavaScript application which is being coded in HTML 5. It has almost 50-60 html pages including repetitive markup such as header, footer and nav. But if I have to make change in header then I have to make changes in 56-60 pages.

Is there any solution to use reusable html markup so if I did changes in one page it will reflect to other pages?

I can't even use php.

Answer 1

Prepare one javascript function. Write your html elements through javascript or jquery function. run it in page load event. and call the function in html by div.

Put this javascript function in separate .js file. And call this js file in wherever you want. And just place the div wherever you want in the html page.

See this jsfiddle DEMO

I Hope this demo will useful to you in this situation.

Answer 2

If you are using HTML (.html) pages and do not have Server-Side-Includes option then you can use a JavaScript template (which is not too difficult).

Second option : use of iframe.

Write the whole javascript code in common_layout.js Add every statement using id of that div and add this file with main layout.

$( document ).ready(function() {
    $('#header').html('<b>Header</b><ul><li>First Link</li><li>Second Link</li></ul> ');
});

UPDATE: One of my favorite post from TutsPlus : Best practices when working with JS Templates

Answer 3

If you are just started with this application. You can think of using client side java script frameworks like - AngularJS. It would be lot easier to maintain the code and solve such trivial issues.

Answer 4

You can use object tag like this:

<object name="header" type="text/html" data="header.html"></object>