How to put a whole html page in a div using jquery?

You use the .load() function:

$("#footballPlayers").load('footballplayers.html body');

Notice the selector after the URL. You can select elements from that page. I think you need the body, as having nested <html> tags could end badly.


A few more comments about your code:

You don't use this function more than once. Just shove all of your code into it:

$(function() {
  // All of your code here.
});

I prefer this syntax, as it looks more functional and shows you what it does:

$(document).ready(function() {
  // All of your code here.
});

Also, your code is really redundant. Try condensing it:

$(document).ready(function() {
  $("#your_menu_container div").click(function() {
    $(this).load(this.id.substr(3).toLowerCase() + '.html').siblings().html('');
  });
});

use load

jQuery("#footballPlayers").load("footballplayers.html");

for more details click here


You can use load for this:

$("#div1").load("myhtmlpage.htm");

Tags:

Html

Jquery