How to Load an HTML File into Another File using jQuery? Last Updated : 26 Mar, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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() 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> 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 ContentYou 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> 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. Comment More infoAdvertise with us Next Article How to fire an event on file select using jQuery ? V vkash8574 Follow Improve Article Tags : Web Technologies JQuery jQuery-Questions Similar Reads 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 How to Display JSON Data in an HTML Table Using jQuery? The task is to fetch data from the given JSON file and convert data into an HTML table. Approach: We have a JSON file containing data in the form of an array of objects. In our code, we are using jQuery to complete our task. The jQuery code uses getJSON() method to fetch the data from the file's loc 2 min read How to create an HTML element using jQuery ? In this article, we will see how to create an HTML element using jQuery. To create and append the HTML element, we use the jQuery append() method. The jQuery append() method is used to insert some content at the end of the selected elements. Syntax: $(selector).append( content, function(index, html) 2 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 fire an event on file select using jQuery ? Given an HTML document and the task to fire an event when a file is selected using jQuery. The JQuery change() method is used to fire an event when file is selected. Using change() method: It is used to change the value of the input fields. This method works with "input, textarea and select" element 2 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 Like