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: 
another approach made available since this question was first asked is to use reactrb-express (see <http://reactrb.org>) This will let you script in ruby on the client side, replacing your html code with react components written in ruby.
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>

```