JavaScript: Using HTML files to make components?

Question

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!

Why do you want to use dot html extension if you need this type of functionality? If you don't have to stick to html extension, then there are multiple ways to achieve what you are saying. — Jayendra Sharan
– Jayendra Sharan, Commented Sep 22, 2021 at 5:30
@JayendraSharan I am open to your answer. Just tell me how can I achieve this functionality. Thanks! — Code Fingers
– Code Fingers, Commented Sep 22, 2021 at 5:31
You are thinking about code reusability like React , but I think there is not a way to do this according to your query, you will have to copy the code of one HTML file into another. — Gulshan Aggarwal
– Gulshan Aggarwal, Commented Sep 22, 2021 at 5:32
If you want to handle everything by yourself, you can create JavaScript files with a function that returns HTML template. Or you can use ejs or handlebars or any other template engine. You can also use React :) — Jayendra Sharan
– Jayendra Sharan, Commented Sep 22, 2021 at 5:33

Jayendra Sharan · Accepted Answer · 2021-09-22 05:49:47Z

2

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.

edited Sep 22, 2021 at 5:49

answered Sep 22, 2021 at 5:47

Jayendra Sharan

1,0186 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Code Fingers Over a year ago

How did you get that Navbar function in the index.js file? Is it because of the script tag before?

Jayendra Sharan Over a year ago

Yes, I updated my answer :)

Code Fingers Over a year ago

I feel your answer is closest to what I want thanks!

Jayendra Sharan Over a year ago

And you unaccepted my answer..ha ha.. :)

Code Fingers Over a year ago

Yea I accepted your answer first but I accepted another after as well that's why maybe sorry

|

Aleksandr Smyshliaev · Accepted Answer · 2021-09-22 05:46:13Z

1

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.

edited Sep 22, 2021 at 5:46

answered Sep 22, 2021 at 5:40

Aleksandr Smyshliaev

4284 silver badges10 bronze badges

3 Comments

Code Fingers Over a year ago

But will it not take me a lot of time to learn it first? Thanks for the answer btw

Aleksandr Smyshliaev Over a year ago

WIll take time, but if you wanna reuse some modules across many modules/pages will need to use some tools.

Code Fingers Over a year ago

Okay, understandable. Thanks!

Rahat Kabir · Accepted Answer · 2021-09-22 05:37:21Z

0

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!

edited Sep 22, 2021 at 5:37

answered Sep 22, 2021 at 5:32

Rahat Kabir

11 bronze badge

2 Comments

Code Fingers Over a year ago

I am sorry but I don't want to use react here for some reason. Can you pls edit your answer? Thanks!

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Amir Rahman · Accepted Answer · 2021-09-22 05:49:20Z

0

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

answered Sep 22, 2021 at 5:49

Amir Rahman

1,1191 gold badge7 silver badges15 bronze badges

Comments

Muhammad Aamir Mughal · Accepted Answer · 2021-09-22 05:56:24Z

0

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.

answered Sep 22, 2021 at 5:56

Muhammad Aamir Mughal

715 bronze badges

Collectives™ on Stack Overflow

JavaScript: Using HTML files to make components?

5 Answers 5

7 Comments

3 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related