Tengo una instalación de WordPress y estoy tratando de usar jQuery para crear un efecto Cargar más. Tengo problemas para usar la función básica .load para fragmentos de página. No me importa usar .get ya que vi algunos hilos aquí con respecto a eso como una mejor solución.

Aquí está la estructura de URL de mi página y los contenidos:

Primera página:http://example.com/page/1/

El 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>

Segunda pagina:http://example.com/page/2/

El 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>

Tengo un enlace en la parte inferior de la página y he intentado hacer lo siguiente:

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

Lamentablemente, hay 2 problemas. Primero la función .load toma el#articles div y su contenido de la segunda página y lo coloca en el existente#articles div. Eso significa que, incluso si esto funcionara, habría divisiones recursivas dentro de las divisiones resultantes de cada clic. Es solo desordenado.

¿Podría alguien ayudarme con el comando de simplemente agregar el.story classes de la segunda página a la#articles div en la primera página? Puedo descubrir la logística de automatizarlo con variables, bucles y PHP para WordPress después. Solo necesito ayuda con el script jQuery adecuado.

PD Pregunta adicional: si alguien sabe si jQuery .load / .get dañará las páginas vistas, lo cual es importante para aquellos con ingresos basados en publicidad, ¡hágamelo saber! Si cada .load / .get cuenta como otro éxito para Google Analytics, ¡estamos bien!

¡Gracias!