jQuery.load可以追加而不是替换吗？

我安装了WordPress, 并尝试使用jQuery创建”加载更多”效果。使用基本的.load功能处理页面片段时遇到了一些麻烦。我不介意使用.get, 因为我在这里看到了一些有关将其作为更好解决方案的话题。

这是我的页面URL结构及其内容：

第一页：http://example.com/page/1/

HTML：

<div id="articles">
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
</div>

第二页：http：//example.com/page/2/

HTML：

<div id="articles">
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
</div>

我在页面底部有一个链接, 我尝试执行以下操作：

jQuery(#articles).load('http://example.com/page/2/ #articles');

可悲的是, 有两个问题。首先, .load函数从第二页获取#articles div及其内容, 并将其放入现有的#articles div中。这意味着, 即使这行得通, 每次点击也会在div内产生递归div。太乱了

有人可以通过命令将第二页的.story类简单地附加到第一页的#articles div中吗？之后, 我可以弄清楚使用变量, 循环和适用于WordPress的PHP实现自动化的后勤工作。只需要适当的jQuery脚本提供一些帮助即可。

附言奖励问题：如果有人知道jQuery .load / .get是否会损害综合浏览量, 这对于那些基于广告收入的用户来说很重要, 请告诉我！如果每个.load / .get都算作是Google Analytics(分析)的另一个热门话题, 那就太好了！

谢谢！

#1

你不能使用jQuery.load()方法附加内容, 但是可以使用jQuery.get()做你想做的事情：

$.get('/page/2/', function(data){ 
  $(data).find("#articles .story").appendTo("#articles");
});

#2

我大概会这样。

$('#articles').append($('<div/>', { id: '#articles-page2' });
$('#articles-page2').load('http://example.com/page/2/ #articles > *');

#articles> *将所有直接子代提取到#article。

#3

对于追加数据, 我认为你不想使用$ .load()。相反, 你可能想研究使用$ .ajax()。

$.ajax({
  url: 'yourlocation/test.html', success: function(data) {
    $('.result').html(data);
    $("#yourdiv").append(data);
  }
});

#4

试试这个对我有用。

$('#articles').append( $('<div/>').load('http://example.com/page/2/ #articles') );

#5

$.get(YourURL, function(data){ 
$('#divID').append(data);});