JavaScript: Using HTML files to make components?-CodePudding

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!

CodePudding user response：

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.

CodePudding user response：

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.

CodePudding user response：

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!

CodePudding user response：

function loadHTML(url){
    return new Promise((res,rej)=>{
        fetch(url).then(r=>r.text()).then(r=>{
            var html = document.createElement("div")
            html.innerHTML = r
            res(html.querySelector("*"))
        })            
    })
}

loadHTML("scrollImageChange.html").then(r=>{
    document.body.append(r)
})

Note: wrap all html markup inside one root element to have it working properly otherwise this function will return only first child

CodePudding user response：

I think you can parse that HTML file to make it a DOM object and then you can manipulate it as you like. Just like a JS component.

For example, use an HTTP call to fetch the HTML file as string and then use it with DOMParser() To create a DOM object.