Включаем файлы в HTML-страницу с помощью JavaScript

Рассмотрим как с помощью JavaScript включить файлы хедера и футера в несколько html-страниц.

В JavaScript это возможно реализовать с помощью jQuery.

Поместите этот код в вашем файле 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>

И поместите этот код примера ниже в header.html и footer.html, в том же месте, что и index.html.

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

Основа всего — эта функция, которая говорит браузеру какой файл и куда размещать его содержимое:

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

Теперь при посещении index.html у вас будет возможность кликнуть по тегам ссылок.

Сергей Ермилов