Load Header and Footer from External HTML Files – header-footerify.js

header-footerify.js is a tiny JavaScript library that adds custom header and footer content across multiple web pages through JavaScript.

It loads header and footer sections from external HTML files and places them into your pages automatically.

How it works:

The library fetches the content of the specified header and footer URLs using the fetch API. If the request is successful, the fetched HTML is inserted into the corresponding <header> or <footer> element on the page. Error handling is also included to alert you if the files cannot be loaded or the header/footer elements are missing.

How to use it:

1. Install & download via NPM.

npm install header-footerify

2. Link to the header-footerify library.

<script src="/dist/headerFooter.js"></script>

3. Add empty header and footer elements to your pages where the content should appear:

<header></header>
  ... Main Content Here ...
<footer></footer>

4. Create two separate HTML files for your header and footer content:

• header.html – Typically contains your navigation menu, logo, and other header elements
• footer.html – Typically contains your copyright notice, social links, and other footer content

5. Call the insertHeaderFooter function and specify the paths to the header.html and footer.html files:

insertHeaderFooter("/path/to/header.html", "/path/to/footer.html");