Is there a way to load a page with static header and footer, yet changing content body

Question

I need to make a webpage where the main.html loads a page with a header and footer that will remain steady after I click on some navigation links, but only changing the body content, all this, using Javascript. The body content comes from another html document in the same folder. I've seen some answers to this, but very old ones using PHP. Please help.

BTW, I'm not using server yet, only loading from file with Chrome. Basically I want to replace the whole body of the page with the body of another html.

Answer 1

You can change part of a website by javascript and load content from other urls using ajax.

https://www.w3schools.com/js/js_ajax_intro.asp

And you can use jQuery lib to perform the ajax calls:

https://www.w3schools.com/jquery/jquery_ref_ajax.asp

The ajax calls can be to a server (this includes firebird and other content from the cloud) or to some files of yours.

It's not the only way, you could also have a look at iframes to see whether they fit your needs.