This, does work effectively and rapidly. However, so use it but be critical as it might be always sensed.
Well, basically:
1a) go here https://releases.jquery.com/ ;
1b) from the last jquery Core version (i.e., I found the 3.6.4) click on "minified", right close to 'uncompressed', 'slim', 'slim minified'. You should find this line of code:
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
2a) Now, before to use that code, create either a file called header.html and one called footer.html.
2b) In them, you have to paste respectively, the code you have to cut from your index.html, normally relative to the header and the footer, wrapped of course into the <header id="header"></header> tag and the <footer id="footer"></footer> one; at the end of this step, you must have created 2 new files reciprocally containing the mere code they are supposed to, wrapped into their tags. One doc for the header, with the header contents, and one for the footer, with only the footer content. (!!!soooo uselessly and redundantly clear, pwef!!!)
2c) Now that two new files ('header.html' and 'footer.html') have been created, save them in the same directory (or folder) where your index.html file is, or, wherever you do prefer accordingly;
Back now in the editor at our native index.html file, left with no header and footer!!! (The poor of him!).
3a) Let now then replace the cut code with the formula will bring back to life. So, take the code upon, obtained from jquery, and paste it just before the </head> of your doc.
3b) Just below, create (by writing it) another script coping the lines below, and mentioning your own id after $(' as well as placing the name of the your own previously created header file, in our example case, called 'header.html'.
<script>
$(function(){
$('#header').load('header.html');
$('#footer').load('footer.html');
});
</script>
3c) Now, right above the tag, paste the following code, in order to replace the previously cut <header></header> original code.
<div id="header"></div>
3d) Do the same for the footer, but placing the following line of code, at the end of the body, just before the tag.
<div id="footer"></div>
Do this operation for every HTML file you are going to create in your multi-page website
NB. when you create the header.html and footer.html file, do not forget to include the respective ids in the <header id="header"></header> and <footer id="footer"></footer> tags!
Recap:
- cut the header and create a files containing only the header code, included in the tags;
- do the same for the footer;
- paste both the jquery code and the relative script in each one of your your header-and-footerless HTML doc;
- custom the script with your IDs and file names;
- create a
<div></div> which is wrapping the ID (see code in the example) in the area where before was laying your footer and header.
That is it.
Enjoy!
