How to load external HTML file using jQuery ? Last Updated : 15 Dec, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 external 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 Comment More infoAdvertise with us Next Article How to download File Using JavaScript/jQuery ? H hritikrommie Follow Improve Article Tags : JQuery jQuery-Methods HTML-Questions jQuery-Questions Similar Reads How to Load an HTML File into Another File using jQuery? 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() MethodThe .load() met 2 min read How to load more feature using jQuery ? Bootstrap provides a lot of useful features that we generally integrate into our websites. One of them is the "Load More" feature which we can see on every second website we visit. The load more feature is used to load more or show more content available on the webpage to the visitor. Initially, hal 4 min read How to create a File Input using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a File Input Area using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=âstylesheetâ hr 1 min read How to add jQuery code to HTML file ? In this article, we will see how to add jQuery code to an HTML file. You can easily add jQuery to HTML by using several methods, like adding jQuery from CDN or directly downloading jQuery files and including them in your projects. Several methods are discussed in this article. Methods: Download and 2 min read How to download File Using JavaScript/jQuery ? The ability to download files directly from a website is an essential feature for many web applications. Whether you're providing documents, images, or other data, enabling users to download files seamlessly enhances their experience and ensures they can access the content offline. This article prov 2 min read 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 Like