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.
<!-- 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>
<!-- content.html -->
<h1>w3wiki</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.
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.