jQuery use .load() to append data instead of replace
Question
how can i have the functionality of load() except i want to append data instead of replace. maybe i can use get() instead but i want to just extract the #posts element from the loaded data
UPDATE
when i do an alert(data) i get ...
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.infinitescroll.js"></script>
<script>
</script>
</head>
<body>
<div id="info"></div>
<div id="posts">
<div class="post"> ... </div>
...
<ul id="pageNav" class="clearfix">
<li><a href="page1.html">1</a></li>
<li><a href="page2.html">2</a></li>
<li><a href="page3.html">3</a></li>
<li><a href="page4.html">4</a></li>
<li><a href="page5.html">5</a></li>
<li><a href="page3.html" class="next">next</a></li>
</ul>
the full code can be found @ pastebin
4 answers
solution1
11 ACCPTED 2010-07-08 11:32:57
There's no reason you can't extract the element you want using $.get() .
$.get('test.html',function(data) {
var posts = $(data).find('#posts');
// If the #posts element is at the top level of the data,
// you'll need to use .filter() instead.
// var posts = $(data).filter('#posts');
$('#container').append(posts);
});
EDIT:
You perhaps didn't notice the code comments above, so I'm going to make it more explicit here.
If the #posts element is at the top of the hierarchy in data , in other words if it doesn't have a parent element, you'll need to use .filter() instead.
$.get('test.html',function(data) {
var posts = $(data).filter('#posts');
$('#container').append(posts);
});
EDIT:
Based on the comments below, you seem to need .filter() instead of .find() .
The reason is that you're passing in an entire HTML structure. When you do that, jQuery places the direct children of the body tag as the array in the jQuery object.
jQuery's .filter() filters against only the nodes in that array. Not their children.
jQuery's .find() searches among the descendants of the nodes in the array.
Because of this, you're needing to use both. .filter() to get the correct one at the top ( #posts ) and .find() to get the correct descendant ( .next ).
$(data).filter('#posts').find('.next');
This narrows the set down to only the #posts element, then finds the .next element that is a descendant.
solution2
2 2013-04-08 19:07:55
To append using load:
jQuery('#Posts').append( jQuery('<div>').load(...) );
This will append whatever you load into the #Posts element.
solution3
1 2010-07-09 02:28:11
$.get("YadaYadaYada.php", function(dat) {
$(dat).find("body > #posts").appendTo("#container");
});
solution4
0 2010-07-08 11:32:31
try use $(this), something like :
<div id="result">Hello World </div>
<script>
$(function() {
$(this).load('templates/test2.html', function(result) {
$('#result').append(result);
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.