How to fetch only sections of specific HTML areas from an external page using AJAX ?
Last Updated :
28 Apr, 2025
In this article, we will see how to fetch the specific sections of an HTML file from an external page using AJAX, along with understanding their basic implementation through the illustrations.
Suppose we have an HTML page and this page contains different sections. Each Section can be identified using the class name or ID. Our task is to use Ajax in the External HTML page and fetch the content of the first HTML page into the External HTML Page. Here, we have 2 HTML pages, where the specific portion of code from HTML page 1 is getting fetched by HTML page 2. The below example depicts the concept of fetching only sections of specific HTML areas from an external page.
To accomplish this task, the jQuery Load() function will be used that helps to load data from the server and returned it to the selected element without loading the whole page.
Syntax:
$(selector).load(URL, data, callback);
This function can load data from files like HTML, TXT, XML, and JSON.
Approach: To perform this task, we will follow the below steps:
- Create two HTML files, i.e. Index.html & External.html.
- Define some elements in the Index.html file. Here, we are defining 3 <section> elements.
- Assign a class name or ID to each section, so that it can be easily identified.
- Inside the <section> tag, declare the unordered list containing different list items.
- Initially create an <div> element in the External.html page to display the fetched content.
- Declare a button element that will call the function of AJAX and data will be fetched and displayed.
- $("#display").load("index.html .first"), JQuery load() method will load the <section> whose classname is .first into the <div> element of External.html page whose id is #display.
Example 1: In this example, we will be fetching the first <Section> element of the index.html page using the External.html page.
- External.html: In this HTML file, we have created a button with a click event. When the button will click for the first time, the Ajax code will run inside the <script> tag. We have specified the ".first" in the load function which means we want to load the section with the class name "first" into our external page.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
</head>
<body>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>
fetch only sections of specific HTML areas
from an external page using AJAX
</h3>
<button onclick="event_occur()">
Click Here
</button><br><br>
<h3>External.html page</h3>
<div id="display"
style="border: 1px solid black;
width:max-content;
padding:0.5rem">
fetched Content will display here.
</div>
<script>
event_occur = () => {
// Load the Section with .first class and display
$("#display").load("index.html .first");
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<section class="first">
<h3>
Index.html - Section - class = "first"
</h3>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Web Development</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVA SCRIPT</li>
<li>JQUERY</li>
</ul>
</section>
<section class="second">
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Machine Learning</h3>
<ul>
<li>Python</li>
</ul>
</section>
<section class="third">
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Courses</h3>
<ul>
<li>Interview Preparation</li>
<li>DSA</li>
<li>DBMS</li>
</ul>
</section>
</body>
</html>
Output:
.gif)
Example 2: In this example, we are fetching all the content of the <div> tag of the index.html page using the External.html page.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Fetching only sections of specific HTML areas
from an external page using AJAX
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
</head>
<body>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>
fetch only sections of specific HTML
areas from an external page using AJAX
</h3>
<button onclick="event_occur()">
Click Here
</button><br>
<h3>External.html page</h3>
<div id="display"
style="border: 1px solid black;
width:max-content;
padding:0.5rem;">
fetched Content will display here.
</div>
<script>
event_occur = () => {
// Load the Div tag with .first class and display
$("#display").load("index.html div");
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<section>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Index.html - Sections </h3>
</section>
<div>
<h3>Web Development</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVA SCRIPT</li>
<li>JQUERY</li>
</ul>
</div>
<section>
<h3>Machine Learning</h3>
<ul>
<li>Python</li>
</ul>
</section>
</body>
</html>
Output:
Similar Reads
How to get the outer html of an element using jQuery ? Sometimes, there is a need to get the entire HTML element by its id and not merely its contents, for doing so, we shall use the HTML DOM outerHTML Property to get the outer HTML of HTML element. Syntax: document.getElementById("your-element-id").outerHTML) You can use a variable and initialize it to
2 min read
How to get HTML content of an iFrame using JavaScript ? The <iframe> tag specifies an inline frame. It allows us to load a separate HTML file into an existing document. Code snippet:function getIframeContent(frameId) { let frameObj = document.getElementById(frameId); let frameContent = frameObj. contentWindow.document.body.innerHTML; alert("frame c
1 min read
How to divide an HTML page into four parts using frames ? This article shows how to divide a page into four parts using HTML frames. This can be used to represent the header, sidebar, footer, and main content. The frames are created using the <frame> tag. We will have to use four HTML files for each of the portions.Syntax<frameset> // frame ele
2 min read
How to use an HTTP GET or POST for Ajax Calls? Sending an HTTP request to the server using AJAX is the most common way of fetching data these days. It provides us with methods to send and receive data. In this article, we are going to discuss GET and POST methods.GET method: This method is used to GET or RECEIVE the data from a file, API, etc.Ho
3 min read
Extract JSON from HTML using BeautifulSoup in Python In this article, we are going to extract JSON from HTML using BeautifulSoup in Python. Module neededbs4: Beautiful Soup(bs4) is a Python library for pulling data out of HTML and XML files. This module does not come built-in with Python. To install this type the below command in the terminal.pip inst
3 min read
How to load external HTML file using jQuery ? In this article, we will learn how to load an external HTML file into a div element. The following jQuery functions are used in the example codes. ready(): The ready event occurs when the DOM (document object model) has been loaded.load(): The load() method loads data from a server and gets the retu
3 min read