Question

I currently use $.get() to fetch HTML markup from another file. How can I add the results to the current jQuery set of matched elements for the current DOM?

I thought add() would do the trick, but it doesn’t. For instance, this doesn’t work:

$.get('file.html', function(data) {
    $('body').add(data)
});

But ideally, if file.html has, say, ”, i’d like to be able to use #result like it was in the current set of elements, with $(‘#result’).html(..).

One thing I could do, is use $.load(‘file.html #result’)… but i’d have to do this multiple times as i’ll be working with multiple elements.

My thought then was perhaps to use

sub$ = jQuery.sub();

and add the returned string of HTML from $.get to it, but don’t know if it’s possible.

Answer 1

You can turn the whole html response into a jQuery object without inserting it into the DOM. This allows you to manipulate or look for specific elements or values and do different things with different parts of the response.

Example:

$.get('file.html', function(data) {
    var $response=$(data);
    var myButton=$response.find('button');

     var someDiv= $response.find('#someDiv').css('color','red')
     $('#someForm').append( myButton)

     $('body').append( someDiv)
});

You can also check for certain elements existence, or certain values within the response and process the response accordingly.

$.get('file.html', function(data) {
   var $response=$(data);

    if( $response.find('#someDiv').length){
      doThis();
    }else{
       doThat();
    }

})