Include same header and footer in multiple html files

Question

I am editing about 60 html files by hand and want to include an identical header and footer in each file. For maintenance purposes, I want to be able to update the header and footer on all pages simultaneously as needed. I think the old-fashioned way to do that was using frames, and the new one is PHP.

The problem is that I need to maintain the current URL structure of the site, and all current pages have a .html extension, which seems to bar using PHP without changing server settings.

I found this answer (Make header and footer files to be included in multiple html pages) which suggested using jquery, but the code is not working for me.

Am I stuck editing every file by hand with every header/footer update?

Answer 1

jQuery's load() function can be used for including common headers and footers. The code should look like:

<script>
$("#header").load("header.html");
$("#footer").load("footer.html");
</script>

Check the following URL for more description:

http://phpsmashcode.com/tips-and-tricks/include-common-files-in-html

Or you can use AJAX to load common headers and footers:

  $.get('header-menu.html', {}, function(response) { 
    $('div#nav').append(response);
  });

  $.get('footer.html', {}, function(response) { 
    $('div#footer').append(response);
  });

It will load the footer and header into the following <div>s respectively:

<div id="nav"></div>

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