I am still a beginner in Javascript and I wondering if I can use innerHTML to post the whole HTML content from another page. I have used innerHTML to just post an HTML code within the same .js page. For example:
I have main.js that contains this
class MyComponent extends HTMLElement {
connectedCallback() {
this.innerHTML = `<h1>Hello world</h1>`;
}
}
customElements.define('my-component', MyComponent);and in the index.html I use this code to implement the main.js
<!doctype html>
<html lang="en">
<head>
<script type="application/javascript" src="js/main.js"></script>
</head>
<body>
<my-component></my-component>
</body>
</html>The question is can I include an HTML page instead <h1>Hello world</h1> like header.html to get the whole HTML code from it? if not, Is there any way to do that?
Thanks.
Edit: I mean for example if I have a page named footer.html and in that page, I have an h1 ex. "Hello world" And I need to use the same h1 in another page index.html without rewrite it again. Can I make that h1 as a template to use in any other page using javascript? My idea that I was looking for is: