How to include HTML page with jQuery

If you are familiar with PHP, there you can quickly embed another PHP or HTML file within your page using include and require statements.

This saves time when you need to add the same line of code in several files.

If you are not using the server-side script on your webpage then you can use the iframe or Client-side scripting language.

There are two ways in jQuery for including a file in another HTML file –

  • AJAX request
  • .load() method

How to include HTML page with jQuery


Contents

  1. Create Embedding file
  2. AJAX – GET request
  3. load() method
  4. Demo
  5. Conclusion

1. Create Embedding file

In the demonstration, I am including a header.html file to index.html.

The header.html file contains menu layout.

header.html

<ul class='menu'>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#blog">Blog</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

CSS

/* Menu */
.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: darkturquoise;
}

.menu li {
    float: left;
}

.menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.menu li a:hover {
    background-color: lightskyblue;
}

2. AJAX – GET request

Send GET requests from AJAX which takes data from the server and using its response in html() method to add it to the page.

Completed Code

<html>
  <head>
  <title>How to include HTML page with jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type='text/javascript'>
   $.get('header.html',function(response){ 
    $('#header').html(response); 
   });
  </script>
 </head> 
 <body>
  <div id='header'></div>
  <div class='content'>Content</div>
 </body>
</html>

3. load() method

There is another way of doing this with .load() function. This also loads content from the server and add it to the selector.

Syntax –

$( selector ).load( URL );

You can pass your URL within the load() method.

Completed Code

<html>
 <head>
  <title>How to include HTML page with jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type='text/javascript'>
   $(document).ready(function(){
    $( "#header" ).load( "header.html" );
   });
  </script>
 </head> 
 <body>
  <div id='header'></div>
  <div class='content'>Content</div>
 </body>
</html>

4. Demo

They both give the same output –

View Demo


5. Conclusion

Both of the ways return content from the server but I don’t recommend it when you are using Server-side scripting within your project like – PHP, where you use built-in statements e.g. -, include, require, include_once, and require_once.

Otherwise, It is a good way of reusing the same code and your file maintenance becomes easy.

If you know some better way to do this then let me know in the comment section.

If you found this tutorial helpful then don't forget to share.

13 thoughts on “How to include HTML page with jQuery”

  1. Hi,

    I tried this. But not working. I even downloaded your content and tried. I am not able to see the menu. Any clue?

    Reply
  2. Hi

    I tried this. But not working

    Error:
    jquery-3.0.0.js:9355 Access to XMLHttpRequest at ‘header.html’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

    Reply
  3. hi
    its all work good but i make menu file and its load on my main page but menu functionality not work in main page
    any suugestion?

    Reply
  4. In the header, class will be active for only home. If we select other header options it will be selected, but in the header only home will be active. Is there any solution?

    Reply

Leave a Comment