Geek Answers Handbook

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

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

I want to know how I can put an entire html page in a div. I tried $("#footballPlayers").html("footballplayers.html");, but instead of text, I completely displayed the text footballplayers.html.

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>
+5
source share
7 answers

use load

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

click here for more details

+8
source

You are using the function .load():

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

URL. . , body, <html> .

:

. :

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

, , :

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

, . :

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

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


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

html DIV - <head> <body> -

+6

load :

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

TRY:

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

footballplayers.html AJAX, div.

:

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

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

+2
source

using your code, you fill in the html code with the constant line "footballplayer.html".

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

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

it receives through AJAX the requested page and fills the element.

+2
source

More articles:


All Articles