How to load a page in div using jQuery?

To load a page in div in jQuery, use the load() method. The load() method allows you to load external HTML content directly into a selected element. Firstly, add the web page you want to add.

Here's the code for new.html ?

<html>
    <head>    
    </head>
    <body>
        <p>This is demo text.</p>
    </body>
</html>

Example

Now, the code snippet for the file which adds the above page ?

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#content').load("new.html");
            });
        </script>
    </head>
    <body>
        <div id="content"></div>
    </body>
</html>

The output of the above code is ?

This is demo text.

Conclusion

The jQuery load() method provides a simple way to dynamically load external HTML content into any div element, making it useful for creating dynamic web pages without full page refreshes.

Updated on: 2026-03-13T19:21:34+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements