HTML – Include .html using jQuery

There are some methods like Server Side Includes which allow us to include other HTML files into a web page on a webserver like

<!-- #include virtual="./common.html" -->

But this technique require server side setting and may be not supported by some web hosting.

Another way to include .html in a web page is using jQuery insertion.

1. Create the index.html as follow.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <div id="header">
      <!-- Content will be inserted by jQuery from header.html -->
    </div>
    <div>body</div>
  </body>
</html>

 

2. Create the header.html which will be inserted in the #header div above.

<header>
  <h1></h1>
  <nav>
    <ul>
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
    </ul>
  </nav>
</header>

 

3. Create the script.js

$(document).ready(function(){ 
  $.get("header.html", function(data) {
    $("#header").html(data);
  });
}); 

 

4. Open the index.html in browser and see what u get.

 

Done =)

Reference: jQuery教學-jQuery Include HTML、插入html、jquery替代iframe

Advertisements

27 thoughts on “HTML – Include .html using jQuery”

  1. it worked you are a genius, can I ask one question ? on my header include I’m using lavalamp nav bar and the code works ok but I cannot get the css to load in the header.html ? I believe I need to change the java script file ? but do not know where to start ?

    Like

  2. Thanks, it works.

    Please can you tell me how to use this method to only load a div when i click on a link and refresh just a part of the page. I mean to replace an ajax function.

    Thanks for your good tricks.

    Like

    1. Create an anchor:

      <a id="load" href="#">Load the header</a>
      

       

      In the js:

      $(document).ready(function(){
        $("#load").click(function(){
          $.get("header.html", function(data) {
            $("#header").html(data);
          });
        });
      }); 
      

      Like

      1. Hello.

        Sorry but it will not work for me.
        All i see on my screen is only body.

        To be precise, what i need to do with my website are:
        – Load the different part of the website like header, nav, content, footer from an html fragment for each of this Div.

        – Refresh the content of the Div content by clicking on link of my Div nav to load different article

        The structure of my website will be like this

        index.html

        – folder page
        —– header.html
        —– nav.html
        —– content.html
        —– footer.html

        – folder article
        —– article 1
        —– article 2
        —– article 3

        – folder script
        —- script.js

        – folder theme
        —– style.css

        On start, jquery have to load the header.html, the nav.html, the content.html and the footer.html in index.html.
        On click on a link of the nav.html charged in index.html the content of content.html is load with the content of an article without reload all the page.

        Is this understandable?
        Can you help us?

        Like

  3. I think i have a part of the response by using .load method of jQuery.

    Like this:

    $(document).ready(function(){
      $( "#header" ).load( "header.html" );
    });
    

    Like

  4. The include is correctly show with firebug because the modification is in the dom and not in the source of the page.

    Like

    1. didn’t click get what you mean, if you get the .load() method working, just implement the ciick even of your nav item and load different .html.

      can u elaborate more what problem u are hving?

      Like

  5. Hello and thanks for your following.

    What i want to explain is that when i use your method, nothing appears on my screen and when i use the .load method the .html appears on the screen and note in the source page.

    The .load method only modifies the DOM.

    “In fine” all is working, but i don’t use your way ^^

    Like

    1. $(document).ready(function(){ 
        $.get("header.html", function(data) {
          $("#header").html(data);
        });
      
        $.get("another.html", function(data) {
          $("#another-tag-id").html(data);
        });
      }); 
      

      Like

  6. Html page 1:

    http://jquery-1.8.0.min.js
    http://code.jquery.com/jquery-1.10.2.js
    https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
    http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
    https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
    HTML 1

    $(function() { $(“#div2”).load(“html2.html”); });
    $(document).ready(function(){
    $.get(“html2.html”, function(data) {
    $(“#div2”).html(data);
    });
    });

    my 1st page

    Html page 2:

    HTML 2
    http://jquery-1.8.0.min.js
    http://code.jquery.com/jquery-1.10.2.js
    http://www.w3schools.com/lib/w3data.js
    https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
    http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

    my 2nd page

    I wnt to include html pag 2 in page1…and i included the script code in page1 as shown in above bt it is nt working…can u please help me

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s