Including Files in an HTML Page Using JavaScript

Let’s look at how to use JavaScript to include header and footer files in multiple HTML pages.

For websites built on a vanilla HTML/CSS/JavaScript stack, it’s often necessary to create shared header.html and footer.html pages that will be included in other HTML pages.

For example, suppose we have a website consisting of several pages—about.html, index.html, and contacts.html—and we want to reuse the footer and header across them, rather than constantly copying the code into every page.

To solve this problem, we can use JavaScript. There’s a way to do this using only HTML and JavaScript. Here’s how.

In JavaScript, this can be implemented using jQuery.

Place the code below in your index.html file. Note that we are including the head jQuery library:

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>

<!--Remaining section-->

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

And place the sample code below in header.html and footer.html, in the same location as in index.html.

<a href="http://www.google.com">click here for google</a>

The foundation of it all is this function, which tells the browser which file to use and where to place its content:

$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});

Now, when you visit index.html, you’ll be able to click on the link tags; you should see the header and footer. But don’t forget to add something to the header.html and footer.html files before testing this method.