Search code examples
javascripthtmlheaderreusability

How do I use small html markup repeatedly?

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.

Solution

  • 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.