JQuery Include Header and Footer in HTML

JQuery Include Header and Footer in HTML

Today, We want to share with you JQuery Include Header and Footer in HTML.
In this post we will show you HTML – Include .html using jQuery, hear for jquery Global Header for all pages we will give you demo and example for implement.
In this post, we will learn about jQuery includes for header, footer, menu, sidebar with an example.

  Laravel 6 CSRF Protection Token Examples

Page Headers And Footers Include in HTML Page

Web sites often different include the exact same or common information on every page get data to : the company logo, img, navigation bar text or other icons, copyright text information, etc.

Even so, coding it takes time and updates can take even longer.

Here Save time is main banifit and no effort with JavaScript.

we can easily ti include file the same header file and footer file information on HTML every page with just simple one line of code.

Example Exaplain is Common header and footer files using HTML and jQuery Include

  What is the difference between let and var in Typescript

Separate Header and Footer in HTML website | Example

Main Logic… | Create Text Files To Link To Your Web Pages

<script> 
$(function(){
  $("#header").load("headerfile.html"); 
  $("#footer").load("footerfile.html"); 
});
</script> 

Full Example of common header and footer for all html pages

headerfile.html

Header Code
<br/>
**************

footerfile.html

**************
<br/>
Footer Code

index.html

Here Call External Files With JavaScript

<html>
<head>
<title></title>
//include jquery file
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script> 
$(function(){
  $("#header").load("headerfile.html"); 
  $("#footer").load("footerfile.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<h1>Include Header-Footer File</h1>
<p>Body Part.....</p>
Something code....
</br></br>
<div id="footer"></div>
</body>
</html>

Development

We hope you get an idea about JQuery Include Header and Footer in HTML
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

  Upload Multiple Images Preview using PHP

We hope This Post can help you…….Good Luck!.

Leave a Reply

avatar
  Subscribe  
Notify of