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!
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.
With JS projects normally use modules in many .js files, not html. For import other modules can use import something from './file.js or const module = require('./someFile.js').
For bundle all files together and generate HTML + JS static files need to use bundlers. Bundlers also can transpile newer JS syntax for support older browsers.
Most used bundler is webpack, can look at rollup, parcel or esbuild too.
Have many tutorials how to use webpack
UPD. Can also look into RequireJS, but it's old approach.
I think you can do it with a js library like react.js ! with it you can create a js component and call it on other js files! if you dont want to use react that i dont know if its possible with pure js!