Using innerHTML to get a whole page content-CodePudding

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.

CodePudding user response：

You can try:

document.body.innerHTML

to access page content.

CodePudding user response：

You can do that with AJAX. Set an URL for that file and make a get request with AJAX.

Using JQUERY

$.get("file_path.html", function(fileText){});