Achieving DRY HTML

Recently, I’ve been doing some pro bono work for a client who has a relatively ancient website that is essentially just HTML and CSS, with a tiny bit of horrible JavaScript that I’ve now realized was generated by a very old version of DreamWeaver. In an effort (maybe in vain) to at least clean things up to make it more workable for myself, I realized I’m kind of at a loss as to how I could “DRY up” some of this code.

The prime example: all of the pages are using the same header, navigation bar, and footer. Currently, this code is just copy and pasted into every single HTML file. What is the simplest way I could go about abstracting that into one single place and just referencing it as needed?

I’m well-versed in modern front-end techniques with React, but I feel like there’s some basic solution to this problem that I’m just not aware of. Should I be looking into jQuery? Could I achieve this just with JavaScript interacting with the DOM? Any suggestions are greatly appreciated!

I could think of a lot of solutions for this, but the easiest (in my eyes) would be to do that on the back end with PHP. You only write ONE header and ONE footer and just include that HTML template in all of your pages.

Can’t you just write a nav bar in JavaScript save it to a variable and append it to whichever divs you need to append it to? I’m pretty sure you could do that with vanilla JS…

If there’s no database, just use a static site generator. If there is, use a web framework. They’re seperate HTML pages, this isn’t a JS problem.