Я пытаюсь использовать код меню заголовка и нижнего колонтитула на всех страницах, но как его разбить, если включенный ниже код не отображается. Код в заголовке. html и нижний колонтитул. html входит в соответственно, и index. html включает эти страницы. Я хочу вызвать header. html и footer. html на каждой странице html, используя JavaScript. Я пробовал код из стека, но не нашел решения
<!DOCTYPE html>
<html lang="en">
<!-- ======= header.html ======= -->
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="descriptison">
<meta content="" name="keywords">
<!-- CSS Files -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<!-- =======end header.html ======= -->
<!-- ======= index.html ======= -->
<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>
<!-- =======end index.html ======= -->
<body>
<!-- ======= Header ======= -->
<header id="header">
</header><!-- End Header -->
<!-- ======= Products displayed ======= -->
"Hello John Doe"
<!-- end -Product displayed -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact section-bg">
contact form---- "Hello John Doe"
</section><!-- End Contact Section -->
</main><!-- End #main -->
<!-- ======= footer.html ======= -->
<!-- ======= Footer ======= -->
<footer id="footer">
"Hello John Doe-footer"
<div class="social">
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
</div>
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top"></a>
<!-- javascript -->
<script src="assets/js/jquery.min.js"></script>
<!-- Main JS File -->
<script src="assets/js/primary.js"></script>
</body> <!-- =======End footer.html ======= -->
</html>