How To Include Html File In Another Html File

March 02, 2023 Post a Comment

I have two html files first.html and second.html and I want to include the second file into the first file for code re usability. I am using following statement to include the file

Solution 1:

Look at this website. http://www.html5rocks.com/en/tutorials/webcomponents/imports/

It suggest what are the best practices. It always depends on your real needs. Why you didn't use frames?

Solution 2:

Using jQuery:

a.html:

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

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

b.html:

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

Solution 3:

use jquery's .load() function to load your template. Please refer this documentation. http://api.jquery.com/load/

Solution 4:

In my opinion the best solution is:

Baca Juga

Using 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>