I tried to put <header> and <footer> in external files. In the console, the code outputs fine, but then the code returns undefined.
Footer HTML:
<footer id="footer" class="footer mt-auto py-3 bg-light">
<div class="container">
<div class="col-12 text-center">
<a style="text-anchor: middle">© 2021 AlexInCube</a>
</div>
</div>
main.html
<script>document.write(importHTMLdata("content/basement.html"))</script>
scripts.js
function importHTMLdata(path){
$.get(path, function(html_string)
{
console.log(html_string)
return html_string;
});
It is NOT recommended to have document.write - it will wipe the page if executed after page load.
Just have this in your js file
$(function() { // on page load
const importHTMLdata = path => { // define a function taking a path
$.get(path, function(html_string) { // get the path
$("body")[path.indexOf("footer") != -1 ? "append" : "prepend"](html_string); // if footer call $("body").append, if not call $("body").prepend
});
}
importHTMLdata("content/header.html"); // load header
importHTMLdata("content/footer.html") // load footer
});
<script src="scripts.js"></script>