Menu
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
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
831
The append() method is used to insert new content inside an existing element. There are some other methods also that provide to insert new content inside an existing element and these are – prepend(), html(), text(), before(), after(), wrap(), etc.
The . append insert the parameter element inside the selector element's tag at the last index position, whereas the . after puts the parameter element after the matched element's tag.
The load() method was deprecated in jQuery version 1.8 and removed in version 3.0. Use the on() or trigger() method instead. Use .
The jQuery load() method is a simple, but powerful AJAX method. The load() method loads data from a server and puts the returned data into the selected element.
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.
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
