In total, I have 3 pages: index.html, sketch.html and user-profile.html.

All of them have the same navbar (I just copied and pasted the nav element for now), but I now realize that this is not the best idea.

The navbar has its position on the screen (HTML), the styling (CSS) and the login and register functionality (Javascript). How would I go about bining these for three different pages?

Since I am using a module bundler (Parcel.js), I was thinking of creating a .js and .css for EACH page. So for example the folder index will have:

index.css -> will import the necessary elements, example (pseudo-code): import "../styles/navbar.css"

index.js -> will import the necessary scripting for logging and registering, example: require("..scripts/sessions.js");

index.html -> will import those two files

... and do the same for each page.

But... is that really necessary? Is there a better way of doing this?

In total, I have 3 pages: index.html, sketch.html and user-profile.html.

All of them have the same navbar (I just copied and pasted the nav element for now), but I now realize that this is not the best idea.

The navbar has its position on the screen (HTML), the styling (CSS) and the login and register functionality (Javascript). How would I go about bining these for three different pages?

Since I am using a module bundler (Parcel.js), I was thinking of creating a .js and .css for EACH page. So for example the folder index will have:

index.css -> will import the necessary elements, example (pseudo-code): import "../styles/navbar.css"

index.js -> will import the necessary scripting for logging and registering, example: require("..scripts/sessions.js");

index.html -> will import those two files

... and do the same for each page.

But... is that really necessary? Is there a better way of doing this?

• javascript
• html
• css
• parceljs

Share Improve this question Follow asked May 16, 2020 at 2:32 kibekibe 18111 gold badge99 silver badges3030 bronze badges 1

• Are you trying to avoid using any service side language to acplish this? If so, you can try to create the nav bar dynamically with JavaScript linked to each page. – rguttersohn Commented May 16, 2020 at 2:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Honestly, there's not an easy way to do this with vanilla Javascript. You basically have to either create the navbar using JS, which can then be imported to each page, or you have to copy and paste it.

The industry solution to this problem is to use React, Vue or Angular, all technologies which allow you to create and reuse JSX 'ponents'. In other words, in React, you could create a navbar ponent, which could easily be imported in any 'page' of the website. But with vanilla HTML/Javascript, it's really not an option.

There is a dirty-but-working vanilla JS hack:

async function includeHTML() {
  const includes = document.getElementsByTagName('include');
  [].forEach.call(includes, include => {
    let filePath = include.getAttribute('src');
    fetch(filePath).then((file) => {
      file.text().then((content) => {
        include.insertAdjacentHTML('afterend', content);
        include.remove();
      });
    });
  });
};

Now, you can create element like this: <include src="navbar.html"></include>

Just run the function. If you add some javascript functionality, use Promises so that your code executes after this function.

includeHTML()