Converting HTML string into jQuery set of elements

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.

Do you want to append() the data to body element or update the elements based on the response? — Ram
– Ram, Commented Dec 9, 2012 at 15:46
Update I guess. For instance, one of the elements I get is a button. I would want to add that button inside a certain div in the current DOM. — sqram
– sqram, Commented Dec 9, 2012 at 15:53

charlietfl · Accepted Answer · 2012-12-09 16:11:46Z

6

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();
    }

})

edited Dec 9, 2012 at 16:11

answered Dec 9, 2012 at 15:59

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

charlietfl Over a year ago

some use $ when creating a jQuery object as a convention to know that is is a jQuery object and not a value, array or object literal

SaidbakR · Accepted Answer · 2012-12-09 16:21:41Z

0

Simply look at jQuery documentation http://api.jquery.com/html/

You have to use html method:

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

answered Dec 9, 2012 at 16:21

SaidbakR

13.6k23 gold badges113 silver badges202 bronze badges

2 Comments

sqram Over a year ago

This isn't what I want. This will replace the entire content of the body.

SaidbakR Over a year ago

so it is easy, instead of body use another selector such as an div with id #someId!

Collectives™ on Stack Overflow

Converting HTML string into jQuery set of elements

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related