how to load a Html page into another?

Question

so i have this page index.html and i would like to load another page page2.html between <div> </div> , any ideas will be helpful

 <ul class="navigation">
        <li><a href="#home">Home<span class="ui_icon home"></span></a></li>
        <li><a href="#aboutus">About Us<span class="ui_icon aboutus"></span></a></li>
        <li><a href="#services">Services<span class="ui_icon services"></span></a></li>
        <li><a href="#gallery">Gallery<span class="ui_icon gallery"></span></a></li>
        <li><a href="#contactus">Contact Us<span class="ui_icon contactus"></span></a></li>
    </ul>
</div> <!-- end of sidebar -->

<div id="main">


    <div id="content">

    <!-- scroll -->


        <div class="scroll">
            <div class="scrollContainer">

                <div class="panel" id="home">

                     <!-- this where the other page should load page2.html -->

                </div> <!-- end of home -->

possible duplicate of [How to include an HTML file with jQuery?](http://stackoverflow.com/questions/15320801/how-to-include-an-html-file-with-jquery) — Boaz, Mar 23 '14 at 01:13

nnnnnn · Accepted Answer · 2014-03-23T01:14:51.840

You could do this:

$("#home").load("page2.html");

That is, use the Ajax .load() method, which will "Load data from the server and place the returned HTML into the matched element."

If you want to do it in response to clicks on anchors in your navigation bar it would be good to set the href of each anchor to the desired URL, e.g.:

<li><a href="page2.html">Home<span class="ui_icon home"></span></a></li>

and then:

$(".navigation a").click(function(e) {
   e.preventDefault(); // don't do standard <a> click behaviour

   $("#home").load(this.href);
});

If you plan to start using jQuery it pays to spend a half hour browsing through the complete list of jQuery methods and selectors to get a sense of what it can do.

how to load a Html page into another?

1 Answers1