How to fetch only sections of specific HTML areas from an external page using AJAX ? (original) (raw)

Last Updated : 23 Jul, 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() functionwill 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
elements.
Assign a class name or ID to each section, so that it can be easily identified.
Inside the
tag, declare the unordered list containing different list items.
Initially create an
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
whose classname is .first into the
element of External.html page whose id is #display.

Example 1: In this example, we will be fetching the first

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

GeeksforGeeks

fetch only sections of specific HTML areas from an external page using AJAX

<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>

Index.html: HTML `

GeeksforGeeks

Index.html - Section - class = "first"

GeeksforGeeks

Web Development

HTML
CSS
JAVA SCRIPT
JQUERY

<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>

Output:

Example 2: In this example, we are fetching all the content of the

tag of the index.html page using the External.html page.

External.html: HTML `

Fetching only sections of specific HTML areas from an external page using AJAX

<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>

index.html HTML `

GeeksforGeeks

Index.html - Sections

Web Development

HTML
CSS
JAVA SCRIPT
JQUERY

<section>
    <h3>Machine Learning</h3>
    <ul>
        <li>Python</li>
    </ul>
</section>

Output: