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
Table of Content
- Create HTML file for Embedding
- Include file using AJAX GET request
- Include file using jQuery load() method
- Demo
- Conclusion
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 –
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.
This is great. It’s working perfect. and I also added this to footer. Thank you very much.
I’m from Sri Lanka.
Hi,
I tried this. But not working. I even downloaded your content and tried. I am not able to see the menu. Any clue?
Make sure you have jquery file
include this in your html file
https://code.jquery.com/jquery-3.6.0.js
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.
hi sir
i download your file and open exampl1.html file but header file is not load
i try local not server
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?
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?