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

Question

First of all I want everyone to know that I am absolute beginner so please be patient with me.

I want to know how am I going to put the entire html page in a div. I tried $("#footballPlayers").html("footballplayers.html"); but it displays footballplayers.html text instead of the whole page.

index.html:

<html>
<head>
<script type="text/javascript" src="jquery1.6.4min.js"></script>
<script type="text/javascript">
 $(function(){
  $("div#tabFootballPlayers").click(function(){
    $("#footballPlayers").html("footballplayers.html");
    $("#actionStars").html("");
    $("#directors").html("");
  });
 });

 $(function(){
  $("div#tabActionStars").click(function(){
   $("#actionStars").html("actionstars.html");
   $("#footballPlayers").html("");
   $("#directors").html("");
  });
 });

 $(function(){
  $("div#tabDirectors").click(function(){
   $("#directors").html("directors.html");
   $("#actionStars").html("");
   $("#footballPlayers").html("");
  });
 });
</script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div>
 <div id="tabFootballPlayers">Football Players</div>
 <div id="footballPlayers"> </div>
 <div id="tabActionStars">Action Stars</div>
 <div id="actionStars"> </div>
 <div id="tabDirectors">Directors</div>
 <div id="directors"> </div>
</div>
</body>
</html>

Why do you want the entire thing in a div? That isn't valid. — MGZero, Nov 16 '11 at 17:26
MGZero, you are wrong! There are many benefits of using that logic (entire page on a div). You have no idea how it opens the possibilites. ... AND IT WORKS!!!!!!!!!!!!!!!!!! — zequinha-bsb, Nov 16 '11 at 17:28
@ManseUK Sure, I wouldn't do anything like this at all. But if I had to, I'd use iframes. — Oliver, Nov 16 '11 at 17:30
@Oliver if you wouldnt do it then dont suggest it to someone learning .... — Manse, Nov 16 '11 at 17:31

score 9 · Answer 1 · edited Nov 16 '11 at 17:45

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('');
  });
});

score 9 · Accepted Answer · answered Nov 16 '11 at 17:28

9

use load

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

for more details click here

answered Nov 16 '11 at 17:28

Hitu Bansal

2,917
10
52
87

score 7 · Answer 3 · answered Nov 16 '11 at 17:26

7

replace

$("#directors").html("directors.html");

with

$("#directors").load("directors.html");

the html file that you load should only contain the contents of the DIV - ie not the <head> the <body> or even the navigation - just the content

answered Nov 16 '11 at 17:26

Manse

37,765
10
83
108

Or you could use a selector and load just the body: `.load("directors.html body");` – Blender Nov 16 '11 at 17:34
@Blender yep - but maybe not body if the page is the same as in the question but with the div completed .... thats why i pointed the OP towards making the HTML file just the contents – Manse Nov 16 '11 at 17:39

score 6 · Answer 4 · answered Nov 16 '11 at 17:26

6

You can use load for this:

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

answered Nov 16 '11 at 17:26

James Johnson

45,496
8
73
110

score 4 · Answer 5 · answered Nov 16 '11 at 17:26

4

TRY:

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

answered Nov 16 '11 at 17:26

Naftali

144,921
39
244
303

score 2 · Answer 6 · answered Nov 16 '11 at 17:27

2

You need to actually load the contents of footballplayers.html using AJAX, and then put that in the div.

Try this:

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

.load uses AJAX to get the page, then loads it into the div.

answered Nov 16 '11 at 17:27

gen_Eric

223,194
41
299
337

score 2 · Answer 7 · answered Nov 16 '11 at 17:31

2

using your code you fill the html code with a constant string "footballplayer.html".

You can use the load method, here is an example:

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

it get via AJAX the page you request and fill the element.

answered Nov 16 '11 at 17:31

Irvin Dominin

30,819
9
77
111

score 0 · Answer 8 · answered Jan 03 '20 at 03:51

0

I'm on the load train:

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

answered Jan 03 '20 at 03:51

daCoda

3,583
5
33
38

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

index.html:

8 Answers8

Linked