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.
Advertisement
Answer
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:
- add anchor tags
<a>to each link of your nav - get the pathname from the url
window.location.pathname - query the DOM for
[href='${path}'](where path is the pathname) - add the class (in this case
active) to reflect the current page - style active class appropriately
NOTE: 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>