在HTML中将一个页面内容插入另一个页面

Question

 <script src="jquery.js"></script> <header id="menu-header"> //menu bar </header> <script> $(function(){ $("#menu-header").load("header.html"); }); </script> 

Here I want to include my header menu into different html pages. How to include one html header into each page? I have already used jQuery load function but it is not working in Chrome.

//menu bar

Answer 1

You can do using jQuery Get Request.

For example here is menu.html file

<ul>
    <li><a href="www.naveedramzan.com" title="Home">Home</a>
    <li><a href="www.naveedramzan.com/about-naveed" title="About">About</a>
</ul>

Here is index.html file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="menu"></div>
<script>
    $(document).ready(function(){
        $.get( "menu.html", function( data ) {
          $( "#menu" ).html( data );
        });
    });
</script>

jQuery will load menu.html file and add html in #menu and that you can do on all pages

Answer 2

This node.js library will help you; templatesjs ;