Making a changeable navbar - navbar

Question

How do you make a navbar you can use on multiple pages that you can change easily?
What I mean is, if you have a big website made of HTML code and you want to change its navbar, you would have to go to every single page and change it, right?
So what I am asking is, how do you make a multi-page navbar that you can change easily?
Something I've done is using JavaScript to create a navbar. In HTML, I have a <div> element with an ID of navbar-slot. Then in Javascript, I write code to stuff a navbar inside with links and all.
var navbar = document.createElement("nav");
var list = document.createElement("ul");
var homeSlot = document.createElement("li");
var home = document.createElement("a");
home.setAttribute("href","index.html");
home.innerHTML = "Home";
homeSlot.appendChild(home);
var aboutSlot = document.createElement("li");
var about = document.createElement("a");
about.setAttribute("href","about.html");
about.innerHTML = "About";
aboutSlot.appendChild(about);
list.appendChild(homeSlot);
list.appendChild(aboutSlot);
navbar.appendChild(list);
document.getElementById("navbar-slot").appendChild(navbar);
But then it occurred to me that, yes, while this is way easier than the "changing everything by hand" approach, it still gets very hard to read when using Bootstrap to refurbish the navbar. So, is there an even easier way?

Answer 1

Simply, use the backtick marker to make a string and save that to the navbar-slot's innerHTML! That's actually quite simple!
const code = `
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
aria-label="Toggle navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="nabar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link text-light dropdown-toggle" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Something
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Something</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>`;
document.getElementById("navbar-slot").innerHTML = code;