Question: I want to create common header and footer pages that are included on several html pages. 

I'd like to use javascript. Is there a way to do this using only html and JavaScript?

I want to load a header and footer page within another html page.

Answer: 
You can accomplish this with [jquery](http://api.jquery.com/load/). 

Place this code in `index.html`

```
<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 put this code in `header.html` and `footer.html`, at the same location as `index.html`

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

```

Now, when you visit `index.html`, you should be able to click the link tags.
You could also put: (load\_essentials.js:)

```js
document.getElementById("myHead").innerHTML =
 "<span id='headerText'>Title</span>"
 + "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
 "<ul id='navLinks'>"
 + "<li><a href='index.html'>Home</a></li>"
 + "<li><a href='about.html'>About</a>"
 + "<li><a href='donate.html'>Donate</a></li>"
 + "</ul>";
document.getElementById("myFooter").innerHTML =
 "<p id='copyright'>Copyright &copy; " + new Date().getFullYear() + " You. All"
 + " rights reserved.</p>"
 + "<p id='credits'>Layout by You</p>"
 + "<p id='contact'><a href='mailto:you@you.com'>Contact Us</a> / "
 + "<a href='mailto:you@you.com'>Report a problem.</a></p>";
```

```html
<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>

<script src="load_essentials.js"></script>
```