How to load external HTML file using jQuery ?

22 Apr, 2021
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 returned data into the selected element.
Note: We will use the ready() function to ensure that our DOM is completely ready before doing any further tasks. We will load the external HTML using load() function.
 
Approach:
First, we will create our external HTML file.
Add a div element on the HTML file where we want to load external HTML.
Under the script, use the ready() function to check if DOM ready.
Then select the div element on which we want to load HTML using load().
External files: The following div-1.html and div-2.html files are used as external files.
div-1.html
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">    <title>div-1</title></head>  <body>    <p>This content is from first div.</p></body>  </html>
div-2.html
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">    <title>div 2</title></head>  <body>    <p>This is content from second div</p></body>  </html>
HTML code: The following code demonstrates the loading of external files into an HTML div.
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">    </script>      <!-- Some CSS -->    <style>        div {            border: 2px solid green;            width: fit-content;            margin: 20px auto;            padding: 2px 20px;            cursor: pointer;        }          p {            font-size: 14px;        }    </style></head>  <body>      <!-- First div -->    <div id="div-1">        First Div        <p>Click to load first html</p>    </div>      <!-- Second div -->    <div id="div-2">        Second div        <p>Click to load first html</p>    </div>      <!-- Script -->    <script>          // Check if file is completely ready        $(document).ready(function () {              // Adding click event on id div-1            // if it clicked then anonymous            // function will be called            $('#div-1').click(function () {                  // Load the exertnal html                // here this refers to                 // current selector                $(this).load('div-1.html');            });              // Same as above            $('#div-2').click(function () {                $(this).load('div-2.html');            });        });    </script></body>  </html>
Output: 
Note: We are using the jQuery click() function, which means the external file will be loaded after we clicked on it. But if you want to load external files just after DOM is ready, just omit the click() event and call the load() function 
HTML-Questions
jQuery-Methods
jQuery-Questions
Picked
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Angular File Upload
Design a web page using HTML and CSS
JQuery | Set the value of an input text field
How to change selected value of a drop-down list using jQuery?
Form validation using jQuery
How to add options to a select element using jQuery?
jQuery | children() with Examples