Including External HTML File to Another HTML File

Include another HTML file in a HTML file

In my opinion the best solution uses jQuery:

a.html:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

b.html:

<p>This is my include file</p>

This method is a simple and clean solution to my problem.

The jQuery .load() documentation is here.

HTML - How to include external html page

You can use jquery to accomplish this task:

Just create a new file "modal.html" and write code for popup there.

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script> 
$(function(){
  $("#header").load("modal.html"); 
});
</script> 
</head>

<body>
 <div id="header"></div>
 <!-- other code -->
</body>

How to include a html file inside another html file with Vanilla Javascript?

You can try this. I am considering elements has id

<script>
    document.getElementById('link-about').onclick = function() {
        document.getElementById('my-div').innerHTML = '<object data="about.html" >'
    }
</script>

Include html in another html file

Method 1:

I think it would be best way to include an html content/file into another html file using jQuery.

You can simply include the jQuery.js and load the HTML file using $("#DivContent").load("yourFile.html");

For example

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#DivContent").load("another_file.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="DivContent"></div>
  </body> 
</html>

Method 2:

There are no such tags available to include the file but there are some third party methods available like this:

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="content.html"></div> 

<script>
w3IncludeHTML();
</script>

</body>
</html>

Method 3:

Some people also used server-side-includes (SSI):

<!--#include virtual="a.html" -->

How to load external html or specific location html file in to angular 10

I did not found any answer nor get reply on this post so i done work around for this is as follow.

http.get('assets/included.html', { responseType: 'text' }).subscribe(
      data => this.externalHtml = this.sanitizer.bypassSecurityTrustHtml(data)
    );

in HTML page

<div [innerHtml]="externalHtml"></div>

Here js and css wont load so used following code to load them.

this.loadJsCssFile("assets/assets/js/prism.js", 'script');
this.loadJsCssFile("assets/assets/css/styles.css", 'css');

public loadJsCssFile(url: any, type: string) {
    let node:any;
    if (type === 'script') {
      node = document.createElement('script');
      node.src = url;
      node.type = 'text/javascript';
    } else {
      node = document.createElement('link');
      node.href = url;
      node.rel = 'stylesheet';
    }
    document.getElementsByTagName('head')[0].appendChild(node);
  }  ````

Open an html file inside another html(i.e. template)

You can use HTML Imports to import an external HTML file with a <template> element where you add the elements you want to import.

In the main file:

<head>
   <link rel="import" href="template.html" id="myTemplate">
</head>
<body>  
   <div id="container"></div>
</body>

In the template.html file:

<template>
    <span>Hello World!</span>
</template>

<script>
    //get the imported HTML document
    var importedDoc = document.querySelector( '#myTemplate' ).import
    //get the content of the template element
    var content = importedDoc.querySelector( 'template' ).content
    //add a compy to the main page
    document.querySelector( '#container' ).appendChild( content.cloneNode( true ) ) 
</script>

In the example above, the conent of the <template> element (the <span> text "Hello World!") will be put in the <div id=container> element in the main page.

Update 2019

HTML Imports won't be supported natively after Chrome 73. You should then use the other solutions listed above (the polyfill, an alternate module loader, JS import, or a direct download with fetch).