jQuery GET html as traversable jQuery object

Question

This is a super simple question that I just can't seem to find a good answer too.

$.get('/myurl.html', function(response){
     console.log(response); //works!
     console.log( $(response).find('#element').text() ); //null :(
}, 'html');

I am just trying to traverse my the html response. So far the only thing I can think of that would works is to regex to inside the body tags, and use that as a string to create my traversable jQuery object. But that just seems stupid. Anyone care to point out the right way to do this?

Maybe its my html?

<html> 
    <head> 
       <title>Center</title> 
    </head> 
    <body> 
        <!-- tons-o-stuff -->
    </body>
</html>

This also works fine but will not suit my needs:

$('#myelem').load('/myurl.html #element');

If you're looking for some element in the response html with an id attribute with the value "element", then it looks correct to me. I am not sure why that wouldn't work. — jessegavin
– jessegavin, Commented Apr 5, 2012 at 16:44
This should answer your question: stackoverflow.com/questions/9540218/a-javascript-parser-for-dom/… — d_inevitable
– d_inevitable, Commented Apr 5, 2012 at 16:46
I think it is failing because it doesn't like the html, head and body tags. — d_inevitable
– d_inevitable, Commented Apr 5, 2012 at 16:50

Community · Accepted Answer · 2017-05-23 12:15:42Z

7

It fails because it doesn't like <html> and <body>.

Using the method described here: A JavaScript parser for DOM

$.get('/myurl.html', function(response){
     var doc = document.createElement('html');
     doc.innerHTML = response;

     console.log( $("#element", doc).text() );
}, 'html');

I think the above should work.

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Apr 5, 2012 at 16:53

d_inevitable

4,4612 gold badges31 silver badges49 bronze badges

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

3 Comments

d_inevitable Over a year ago

I would need to look at the inner detail of how jquery works to answer that. Basically jquery has a way on how it builds dom objects when when an html string argument is given. This was is simple not compatible with html strings that contain body and html tags, but fortunately it is not the only way and the way above is a different way of doing it.

Fresheyeball Over a year ago

ok now I have a problem. IE says SCRIPT600: Invalid target element for this operation. on doc.innerHTML

d_inevitable Over a year ago

As with everything else, IE needs workarounds: stackoverflow.com/questions/7474710/…

Community · Accepted Answer · 2017-05-23 11:51:56Z

1

When jQuery parses HTML it will normally strip out the html and body tags, so if the element you are searching for is at the top level of your document structure once the html and body tags have been removed then the find function may not be able to locate the element you're searching for.

See this question for further info - Using jQuery to search a string of HTML

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Apr 5, 2012 at 16:54

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

Comments

mspisars · Accepted Answer · 2012-04-05 16:58:29Z

0

Try this:

$("#element", $(response)).text()

This searches for the element ID in the $(response) treating $(response) as a DOM object.

edited Apr 5, 2012 at 16:58

answered Apr 5, 2012 at 16:47

mspisars

8548 silver badges21 bronze badges

1 Comment

Fresheyeball Over a year ago

response.responseText is undefined

David Gorsline · Accepted Answer · 2012-04-05 16:57:00Z

-1

Maybe I'm misunderstanding something, but

.find('#element')

matches elements with an ID of "element," like

<p id="element">

Since I don't see the "tons of stuff" HTML I don't understand what elements you're trying to find.

answered Apr 5, 2012 at 16:57

David Gorsline

5,01812 gold badges33 silver badges36 bronze badges

1 Comment

Jamie Dixon Over a year ago

This isn't an answer David. It'd be more appropriate to have posted this as a comment.

Collectives™ on Stack Overflow

jQuery GET html as traversable jQuery object

4 Answers 4

3 Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related