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 your time when you need to add the same line of code in several files.

But what when you are not using Server side scripting within your project.

For solving your problem you can use <iframe > which simply add another page in your file but I don’t think it is a better way.

You can handle this on your Client-side with jQuery.

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

  • AJAX request
  • .load() method

How to include HTML page with jQuery


Contents

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

1. Creating 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>

Adding some 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

Sending GET requests with 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 for 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 gives 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 for doing this let me know in the comment section.

Related Post

Spread the love

Be First to Comment

Leave a Reply

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