How to include HTML page with jQuery

If you are familiar with PHP, there you can quickly embed another PHP or HTML file within your page using include and require statements.

This saves the time when need to add the same line of code in several files.

If you are not using the server-side script in your webpage then you can use the iframe or Client-side scripting language.

There are two ways in jQuery for including a file in another HTML file –

  • AJAX request
  • .load() method

How to include HTML page with jQuery


Contents

  1. Create Embedding file
  2. AJAX – GET request
  3. load() method
  4. Demo
  5. Conclusion

1. Create Embedding file

In the demonstration, I am including a header.html file to index.html.

The header.html file contains menu layout.

header.html

<ul class='menu'>
 <li><a class="active" href="#home">Home</a></li>
 <li><a href="#about">About</a></li>
 <li><a href="#blog">Blog</a></li>
 <li><a href="#contact">Contact</a></li>
</ul>

CSS

/* Menu */
.menu {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: darkturquoise;
}

.menu li {
 float: left;
}

.menu li a {
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

.menu li a:hover {
 background-color: lightskyblue;
}

2. AJAX – GET request

Send GET requests from AJAX which takes data from the server and using its response in html() method to add it to the page.

Completed Code

<html>
  <head>
  <title>How to include HTML page with jQuery</title>
  <script src='jquery.js' type='text/javascript'></script> 
  <script type='text/javascript'>
   $.get('header.html',function(response){ 
    $('#header').html(response); 
   });
  </script>
 </head> 
 <body>
  <div id='header'></div>
  <div class='content'>Content</div>
 </body>
</html>

3. load() method

There is another way of doing this with .load() function. This also loads content from the server and add it to the selector.

Syntax –

$( selector ).load( URL );

You can pass your URL within the load() method.

Completed Code

<html>
 <head>
  <title>How to include HTML page with jQuery</title>
  <script src='jquery.js' type='text/javascript'></script> 
  <script type='text/javascript'>
   $(document).ready(function(){
    $( "#header" ).load( "header.html" );
   });
  </script>
 </head> 
 <body>
  <div id='header'></div>
  <div class='content'>Content</div>
 </body>
</html>

4. Demo

They both give the same output –


5. Conclusion

The both of the ways return content from the server but I don’t recommend it when you are using Server-side scripting within your project like – PHP, where you use built-in statements e.g. -, include, require, include_once, and require_once.

Otherwise, It is a good way of reusing the same code and your file maintenance becomes easy.

If you know some better way to doing this let me know in the comment section.

Related Post

Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *