JavaScript: Using HTML files to make components?

Is there a way to make files like navbar.html and then using JavaScript to use files like these as components? For example, Let's say I have a file called imageCarousel.html and I have to use this file in many different HTML files so how can I make a JavaScript file that has a function that takes in the class of where I want to display the HTML file's code, and then the path of the HTML file and then also how can I use that JavaScript file in other JavaScript files?

I have searched many different places and I can clearly state that there is no other place for this exact question. And I am asking this question after doing all the research.

Also I don't want to use any library here like react etc.

Thanks for reading this query!

Solution

You can create your templates using JS functions. As explained in the comment, you would need some kind of development environment to write your code into multiple file and then organise them.

If you don't want to this...Here is what you can do.

index.html

<script src="/path/to/Navigation.js"></script>
<script src="/path/to/index.js"></script>

in Navigation.js

function Navbar (text) {
  return `
    <nav class='navbar'>
      <h1>Hello Template</h1>
      <a href="www.google.com">Go To Google</a>
      <h3>${text}</h3>
    </nav>
  `;
};

in index.js
document.getElementById("app").innerHTML = Navbar("Hello from template");

See this codesandbox for example: https://codesandbox.io/s/elegant-mccarthy-t6msj?file=/index.html

PS: This is a bad practice though, and it will get complicated as your application grows. Because the sequence of imported files will matter. Consider them as depedencies. In this case, index.js needs Navigation.js and this chain will grow with as many as components and scripts you add.

So I would suggest you to explore the module building library if you want to build an application. If you are just trying to learn...then I guess this will help.