I have a webpage like:
<html>
<head>
. . .
</head>
<body>
<div id="wrapper">
<p>Lots of content here!</p>
</div>
</body>
</html>
I also have an external file like this:
<div id="more-stuff"><p>Even more content!</p></div>
What I want is for to have a webpage like this:
<html>
开发者_如何学运维<head>
. . .
</head>
<body>
<div id="wrapper">
<p>Lots of content here!</p>
<div id="more-stuff"><p>Even more content!</p></div>
</div>
</body>
</html>
Using jQuery. My guess is something like this:
$(document).ready(function(){
$('#wrapper').append.load('/external.htm');
});
But it won't work and I can't seem to find a good solution.
Try something like this:
$(document).ready(function(){
$.get('/external.htm', function(data) {
$('#wrapper').append(data);
});
});
It tells jQuery to request the html file, and then to run the callback (which in turn appends the data returned by the request) when it is ready.
.append()
doesn't work that way. It needs text to append. But .load()
overwrites the contents of its target, so you need to first append a child, then load to that child.
$(document).ready(function(){
$('#wrapper').append($(document.createElement("p")).load('extern.html'));
});
精彩评论