How to include HTML page with jQuery

If you’re familiar with PHP, you can efficiently embed another PHP or HTML file within your page using include and require statements. This approach saves time, particularly when you need to incorporate the same line of code across multiple files.

However, if you’re not utilizing server-side scripts on your webpage, alternatives such as iframes or client-side scripting languages can be employed.

In jQuery, there exist two primary methods for including a file within another HTML file:

1. AJAX request
2. .load() method

How to include HTML page with jQuery

Demo Download

1. Create HTML file for Embedding

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

The header.html file contains the 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. Include file using 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.

Full Code

<html>
    <head>
        <title>How to include HTML page with jQuery</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.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. Include file using jQuery 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.

Full Code

<html>
   <head>
       <title>How to include HTML page with jQuery</title>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.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 methods, the AJAX request and the .load() method, retrieve content from the server. However, it’s not advisable to use them when you’re already implementing server-side scripting in your project, such as PHP, where built-in statements like include, require, include_once, and require_once are available.

In the context of server-side scripting, these built-in statements are more suitable. They offer efficient ways to include files and enhance code reuse, simplifying file maintenance.

If you know a 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.