Expanding lolo's answer, here is a little more automation if you have to include a lot of files. Use this JS code:

$(function () {
  var includes = $('[data-include]')
  $.each(includes, function () {
    var file = 'views/' + $(this).data('include') + '.html'
    $(this).load(file)
  })
})

And then to include something in the html:

<div data-include="header"></div>
<div data-include="footer"></div>

Which would include the file views/header.html and views/footer.html.

That is called HTML includes, and YES, it is possible

<div w3-include-HTML="content.html">My HTML include will go here.</div>
<script>
(function () {
  myHTMLInclude();
  function myHTMLInclude() {
    var z, i, a, file, xhttp;
    z = document.getElementsByTagName("*");
    for (i = 0; i < z.length; i++) {
      if (z[i].getAttribute("w3-include-html")) {
        a = z[i].cloneNode(false);
        file = z[i].getAttribute("w3-include-html");
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (xhttp.readyState == 4 && xhttp.status == 200) {
            a.removeAttribute("w3-include-html");
            a.innerHTML = xhttp.responseText;
            z[i].parentNode.replaceChild(a, z[i]);
            myHTMLInclude();
          }
        }      
        xhttp.open("GET", file, true);
        xhttp.send();
        return;
      }
    }
  }
})();
</script>

NOTES

HTML doesn't have a simple include mechanism (except for frames like iframe, which have side effects).

A better solution would be to use Server-Side includes, which is the preferred way of adding common parts to your document, on the server, of course.

So, let's look at how w3 implemented this:

function w3IncludeHTML() {
  var z, i, elmnt, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          elmnt.innerHTML = this.responseText;
          elmnt.removeAttribute("w3-include-html");
          w3IncludeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
}

The first thing that jumps out at me is this:

z = document.getElementsByTagName("*");

That grabs every element on the page. OK for small sites, but if you have lots of elements, this is not great. If your tests don't show it to be inefficient, it's because it's too small of a test case.

Then it loops through every element, checking to see if it has a non-standard attribute called `w3-include-html'.

For the first one it finds, it starts an AJAX request to download the contents of the referenced file, then returns. So only the first element that has the w3-include-html will actually be set. Also note: if your server is slow to respond with the referenced file, the div that's supposed to have that content will be blank with no indication of loading or that content is coming.

But wait! In the callback for the AJAX request, once the HTML comes back, it re-runs the w3IncludeHTML function. Which means this whole process starts over again; over and over until there's no elements with that attribute left on the page.

IMO, this is a bit of a messy way to do "includes". There might be a better way to do what you're asking about.

First, are you using a "back end", or is this front-end only? Are you using PHP/Django/Node.JS/ASP.NET/anything like that? If you are, each has its own way of including partial content on a page that won't involve another ajax request to the server; it would be included on the server-side and sent back to the client as one file.

If you still want to proceed with an include mechanism like this, I'd recommend you write it yourself. You can do better than they did, and it's really just one function.

What I'd recommend if you go down this route: use data attributes. You can query nodes by their data attributes, so you don't have to pull in every node and check for it. You can also use an ID (or even just capture the HTML node itself in your closure) so you don't have to return and have your callback keep chaining these calls; you could kick off all the include calls the first time and not re-call it (unless you wanted to support nested includes).

That's what I'd do.