How do I create a .js file that creates a navigation bar in html-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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...).

CodePudding user response：

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.