Ok so, I am creating this site and I want every page to have a navigation bar, how do I make it so that instead of having to write the html for the navigation bar on every page, I just write in the .js file and add this javascript file to every page.
Btw, I'm not asking how to write a navigation bar in html, I've already done that.
You can use .insertAdjacentHTML and pass the 'afterbegin' as the "where" to add the html. In this example it's appending as the first element in the body.
const header= "<div>This is my nav</div>"
document.querySelector("body").insertAdjacentHTML("afterbegin", header);<body>
<div>
Content of page
<div>
</body>Edit to add links you can do something like:
<a> to each link of your navwindow.location.pathname[href='${path}'] (where path is the pathname)active) to reflect the current pageNOTE: the current window (stackoverflow snippet window) pathname is /js so for this example I used it as the href of the second nav link.
ALSO NOTE: I'm assuming all your html files are in the same directory
//get the pathname from the current url
const path = window.location.pathname
const header= `
<ul class="nav">
<li><a href="/home">Home</a></li>
<li><a href="/js">Javascript</a></li>
</ul>`
document.querySelector("body").insertAdjacentHTML("afterbegin", header);
//add the active class to the anchor tag with the href === path
document.querySelector(`[href='${path}']`).classList.add('active').nav li{
display: inline-block;
}
.nav a{
text-decoration: none;
color: black;
}
.nav .active{
text-decoration: underline;
color: grey;
}<body>
<div>
Content of page
<div>
</body>For that, I would recommend that you use a UI library like React, which when paired with React Router will definately yeild you much cleaner code and a better development experience overall.
With that in mind, I know that there is a significant learning curve towards dominating new libs/frameworks, so one way you could do it using vanilla HTML, CSS and JS is by pasting your HTML code for the header into a variable and injecting it by using some DOM methods like .append or .insertAdjecentHTML on a selected element (div, header, body...).
If your site will contain mostly static content, then I suggest looking into a static site generator (SSG) like Jekyll, Hugo or Gatsby. When I started web development, I used Jekyll and it was very beginner friendly. You could then link from your navbar to your other pages normally.