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.
Use ajax  

main.js

```
fetch("./includes/header.html")
    .then(response => {
        return response.text();
    })
    .then(data => {
        document.querySelector("header").innerHTML = data;
    });

fetch("./includes/footer.html")
    .then(response => {
        return response.text();
    })
    .then(data => {
        document.querySelector("footer").innerHTML = data;
    });

```

index.html

```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Liks</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <header></header>
        <main></main>
        <footer></footer>
        <script src="/js/main.js"></script>
    </body>
</html>

```