How to Load an HTML File into Another File using jQuery? Last Updated : 26 Mar, 2024 Comments Improve Suggest changes 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 load external HTML file 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 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 insert HTML content into an iFrame using jQuery? Here is the task to insert HTML content into an iFrame using jQuery. To do so, we can use the jQuery contents() method. The .contents() method: It returns all the direct children, including text and comment nodes for the selected element. Syntax: $(selector).contents()Find the iframe in the body sec 2 min read How to insert HTML content into an iFrame using jQuery? Here is the task to insert HTML content into an iFrame using jQuery. To do so, we can use the jQuery contents() method. The .contents() method: It returns all the direct children, including text and comment nodes for the selected element. Syntax: $(selector).contents()Find the iframe in the body sec 2 min read How to make HTML files open in Chrome using Python? Prerequisites: Webbrowser HTML files contain Hypertext Markup Language (HTML), which is used to design and format the structure of a webpage. It is stored in a text format and contains tags that define the layout and content of the webpage. HTML files are widely used online and displayed in web brow 2 min read Like