Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to put a complete HTML page in a div using jQuery?
To put a complete HTML page in a div using jQuery, use the load() method. The load() method loads data from a server and puts the returned data into the selected element. This is particularly useful when you want to dynamically load content from another HTML file into a specific section of your current page.
First, let's create the HTML page that you want to load. Here's the code for new.html ?
<html>
<head>
<title>External Page</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Demo text</p>
</body>
</html>
Example
Now, here's the code for the main HTML file which loads the above page into a div element ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#myid').load("new.html");
});
</script>
</head>
<body>
<h2>Main Page Content</h2>
<p>This content will remain, and the external page will be loaded below:</p>
<div id="myid"></div>
</body>
</html>
The output will display the main page content followed by the loaded content from new.html ?
Main Page Content This content will remain, and the external page will be loaded below: Heading 1 Demo text
Conclusion
Using jQuery's load() method is an efficient way to dynamically include complete HTML pages within div elements, making it easy to create modular and dynamic web applications.
683 Views
