After reading your responses to some other comments here, I might be able to offer some advice. I haven’t done professional web dev for a long time now, but I’ve kept my hand in a little with hobby projects.

First, you need to imagine a wall between the server and the client (browser). Unless you deliberately build a connection between the two, it won’t exist. A standard static webserver only sends flat files to the browser. Now, if I understand what you’re thinking, what you want to do is technically possible, but it’s kind of like getting milk from the corner store by moving the store’s fridge into your kitchen.

Usually what you’re talking about is done with dynamically served pages, using some kind of server-side scripting. The server-side script grabs all the pieces of your page from files, assembles them on the server, then sends the finished page to the user’s browser (on the other side of the “wall”) as a regular, static page. I haven’t used it myself, but I believe that Node.js allows us to use JavaScript as a server-side scripting language, although you still need to have it installed on your server (as with any server-side scripting language).

It should certainly be possible to achieve a similar end result by sending an initial page to the client, loaded with JavaScript that performs subsequent requests from the browser back to the server, and assembles the page on the client’s side, but doing your basic page construction this way would probably be considered by most as a really messy solution.

Here’s an article I found which may give you some tips for further research: https://css-tricks.com/the-simplest-ways-to-handle-html-includes/

If I absolutely had to do something like this with client-side JavaScript, I’d probably make a .js file (or files) with each section (i.e. header, footer, etc.) being handled by a single function that takes a CSS DIV id and fills it from static strings with insertAdjacentHTML() calls. This is nasty enough without trying to write a script that loads and parses other HTML pages from within the browser.

It’s easy enough to include extra .js files in an HTML file; you just need to make sure that the included files have loaded before you start trying to alter your page in the browser. Keep in mind that those “included” .js files are actually going to be fetched by the user’s browser in a separate HTTP exchange, after the inital page request, although most browsers will parse the page as if the included files were literally copied and pasted into the base HTML at the point where they are included.