How to Load an HTML File into Another File using jQuery?
Last Updated :
26 Mar, 2024
Loading HTML files into other HTML files is a common practice in web development. It helps in reusing HTML components across different web pages. jQuery is a popular JavaScript library, that simplifies this process with its .load() method.
Approach 1: Basic Loading with .load() Method
The .load() method in jQuery is used to load data from the server and place the returned HTML into a specified element.
HTML
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Load HTML File</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<div id="content"></div>
<script>
$(document).ready(function () {
$("#content").load("content.html");
});
</script>
</body>
</html>
<!-- content.html -->
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
Output:
Explanation:
- The <div> with id=”content” is the placeholder where the external HTML will be loaded.
- The .load(“content.html”) method fetches the content of content.html and inserts it into the #content div.
Loading Specific Content
You can load specific parts of an HTML file by using a CSS selector after the file name in the .load() method.
HTML
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Load Specific Content</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<div id="specific-content"></div>
<script>
$(document).ready(function () {
$("#specific-content").load("content.html #container");
});
</script>
</body>
</html>
<!-- content.html -->
<h1>
How to Load an HTML File into
Another File Using jQuery?
</h1>
<div id="container">
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
</div>
Output:
Explanation: The .load(“content.html #container”) method fetches only the content within the element with id=”paragraph” from content.html.
Share your thoughts in the comments
Please Login to comment...