how to load an section from another html page with javascript [duplicate]

Solution 1:

The jQuery .load() function allows you to specify a portion of a page to load, rather than just the whole document.

e.g.

$('#mainContainer').load('loadpage.html #nav1div');

Check out the jQuery load() documentation particularly where it regards “Loading Page Fragments”.

To load DIVs one after another, define a counter

var curDiv = 1; // current Div

somewhere at the beginning (better to define a $(document).ready() function to initialize it). Define this function:

function loadThing()
{
    if (curDiv<5) $('#mainContainer').load('loadpage.html #nav' + (curDiv++) + 'div');
}

Define the click event like:

$("input#getdiv").click(loadThing);

and you button like:

<input id="getdiv" type="button" value="Details" />

With every click you should get first div, second, and so on.

With this approach you separate JS from HTML, which is always good.

jQuery load can easily load page fragments, like so

$('#mainContainer').load('loadpage.html #nav1div');