Loading A Page Into Div Using jQuery

In this section, we will learn to load an HTML page into div tag using jQuery. This task seems quite simple but very useful sometimes. Let's go and implement it.


Let's make a road map to implement this task. We have a page, which we wish to be loaded. What we will do is, we will take an anchor, onclick on this anchor we will load an html page onto div through jQuery.
.load() method

Basically .load() method will load the data from the server and it will place the returned HTML page into the matched element.
.load( url [, data ] [, complete ] )

url :

It will contain string, to which the request is sent. It is of string type.


Data is basically of string and plain object type and is included with request.


This section of .load() method will be executed when the request is completed.

Code Snippet  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  6. </head>  
  7. <script type="text/javascript">  
  8.     jQuery(function () {  
  9.         jQuery('#anchorLink').click(function () {  
  10.             jQuery('#pagecontainer').load('Page.html',  
  11.                             function () {  
  12.                                 alert('Content Successfully Loaded.')  
  14.                             }  
  15.                     );  
  16.         });  
  17.     })  
  18.         </script>  
  19. <body>  
  20. <a href="javascript:void(0)" id="anchorLink">To Load your page,click here...</a><br />  
  21.         <div id="pagecontainer" />  
  22. </body>  
  23. </html>  

On clicking this anchor
We have successfully loaded a page into div using jQuery. Queries and suggestions are always welcomed. Thanks for going through this article.