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() Method

The .load() method in jQuery is used to load data from the server and place the returned HTML into a specified element.

Output:

👁 load-file-jquery

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 Content

You can load specific parts of an HTML file by using a CSS selector after the file name in the .load() method.

Output:

👁 load-file-jquery

Explanation: The .load("content.html #container") method fetches only the content within the element with id="paragraph" from content.html.