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, Apr 05 '12 at 16:44
This should answer your question: http://stackoverflow.com/questions/9540218/a-javascript-parser-for-dom/9540313#9540313 — d_inevitable, Apr 05 '12 at 16:46
I think it is failing because it doesn't like the html, head and body tags. — d_inevitable, Apr 05 '12 at 16:50
@d_inevitable so what you recommend? make that document head body and html tagless? — Fresheyeball, Apr 05 '12 at 16:51
@Fresheyeball Yes, if that page is purely for ajax. otherwise consider my answer below. — d_inevitable, Apr 05 '12 at 16:54

score 7 · Accepted Answer · edited May 23 '17 at 12:15

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 '17 at 12:15

Community

1
1

answered Apr 05 '12 at 16:53

d_inevitable

4,381
2
29
48

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. – d_inevitable Apr 05 '12 at 17:08
ok now I have a problem. IE says `SCRIPT600: Invalid target element for this operation.` on `doc.innerHTML` – Fresheyeball Apr 05 '12 at 22:23
As with everything else, IE needs workarounds: http://stackoverflow.com/questions/7474710/can-i-load-an-entire-html-document-into-a-document-fragment-in-internet-explorer – d_inevitable Apr 05 '12 at 22:27

score 1 · Answer 2 · edited May 23 '17 at 11:51

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 '17 at 11:51

Community

1
1

answered Apr 05 '12 at 16:54

ipr101

24,096
8
59
61

mspisars · Answer 3 · 2012-04-05T16:58:29.633

0

Try this:

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

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

edited Apr 05 '12 at 16:58

answered Apr 05 '12 at 16:47

mspisars

844
8
21

response.responseText is undefined – Fresheyeball Apr 05 '12 at 16:50

score -1 · Answer 4 · answered Apr 05 '12 at 16:57

-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 05 '12 at 16:57

David Gorsline

4,933
12
31
36

1

This isn't an answer David. It'd be more appropriate to have posted this as a comment. – Jamie Dixon Apr 05 '12 at 18:30

jQuery GET html as traversable jQuery object

4 Answers4