HTML, jQuery

HTML – Include .html using jQuery

28 Comments

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

28 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

    Reply

      1. I got it to work by putting the css link in the header.html ? you can look at the page at http://www.wokdog.com the lavalamp is working ? can you give me an idea how to fix the menu opening behind the slider ?

        kc6ymp

        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

    Reply

    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

      Reply

      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

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

    Like this:

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

    Liked by 1 person

    Reply

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

    Like

    Reply

    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

      Reply

  6. 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

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

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

      Like

      Reply

  10. 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

    Reply

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.