[jQuery] Load specific elements from a page with an AJAX call and append them to a list?

Question

I've got two page:

Page 1 has a title, an empty ol and some jQuery that calls an AJAX function.

Page 2 has an ol filled with list items from which I plan on pulling specific ones.

The AJAX I'm using looks as follows:

$("#loader").load("ajax.html li:nth-child(1)");

It works great in pulling in that first li. However, if something is already in #loader it is replaced. Instead, I'd like it to append the new li behind the already existing ones. I've tried using the ajax() function but that does not allow you to call forth a specific element the way the load() function does, or, at least, I can't find a way.

What I'm eventually going to do is make it so that a series of li's are called in via an AJAX call and added to the already-existing list. The problem is I'm getting stuck on the initial adding. The rest I'm pretty sure I can figure out by calling a function that contains a for-loop.

Answer 1

using $get instead of $.ajax

var loadContent = function(url, targetSelector, contentSelector){
   var target = $(targetSelector);
   $.get(url, function(data){
     target.append($(targetSelector, data));
   });
};

loadContent('ajax.html', '#loader', 'li:nth-child(1)');

You could of course skip the function definition and just do it all with the callback to $.get:

$.get('ajax.html', function(data){
   $('#loader').append($('li:nth-child(1)',data));
});

If you just want the html content of the li or ol then use $('li:nth-child(1)',data).html() in the append calls instead.