How do include different HTML pages with Javascript/Jquery/HTML?

Question

I know iframes accomplishes this, but I want to find out how to do it without iframe if possible. I have for example 4 pages.

index.html 1.html 2.html 3.html

Where index.html has 3 links. if I click on link 1 on the index.html page, all the html content in 1.html is loaded in. If I clikc on link 2, then 2.html is loaded in.

How do I accomplish this with Jquery/Javascript/HTML only? (No serverside)

Answer 1

With jQuery you can use the get() or load() functions to get the contents of a page. If you use get you can then append it to an element in your current page, or use the html function to overwrite existing content in that element.

Using load is simpler:

$("#yourElementId").load("1.html");

Answer 2

As other folks suggested, .load() may be your friend here. Additionally, note that you can load specific parts of the requested page. This example is from the API doc for load()

$('#result').load('ajax/test.html #container');

It takes the element with ID container from the results of ajax/test.html and loads it into the local element with ID result . This technique may be more of what you want, particularly if you're trying to combine multiple pages into one.

Answer 3

You can also do this with jQuery Ajax method pretty easily and it gives you a bit more flexibility than the load method (eg you can specify you don't want to get a cached version of the page).

<div id="results"></div>

$.ajax({
  url: "1.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});