Menu
I want to create common header and footer pages that are included on several html pages.
I'd like to use javascript. Is there a way to do this using only html and JavaScript?
I want to load a header and footer page within another html page.
392
You could place your footer HTML in a separate file, and then use javascript to load the HTML content of that file, and append it to a div in your page. Show activity on this post. Place your code in some html file and then use jquery to include in the file you want.
Besides just using include() or include_once() to include the header and footer, one thing I have found useful is being able to have a custom page title or custom head tags to be included for each page, yet still have the header in a partial include.
You can accomplish this with jquery.
Place this code in index.html
<html> <head> <title></title> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"> </script> <script> $(function(){ $("#header").load("header.html"); $("#footer").load("footer.html"); }); </script> </head> <body> <div id="header"></div> <!--Remaining section--> <div id="footer"></div> </body> </html> and put this code in header.html and footer.html, at the same location as index.html
<a href="http://www.google.com">click here for google</a> Now, when you visit index.html, you should be able to click the link tags.
163
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
