Possible jQuery bug parsing HTML

Question

I just discovered this issue, and I wanted to run it by everyone here to make sure I wasn't missing obvious something before I reported it.

Here is what's causing me a problem:

html = '<html><body><div id="test">This is just a test</div></body></html>';
alert( $(html).find('#test').html() );

The alert window shows null instead of the text inside #test. HOWEVER, if I simply wrap <div id="test"> in another div element, it works properly and returns the expected, "This is just a test".

This code works:

html = '<html><body><div><div id="test">This is just a test</div></div></body></html>';
alert( $(html).find('#test').html() );

Can someone explain to me why this would be happening? Why would the second example work but the first one not?

zopieux · Accepted Answer · 2011-04-09 09:59:30Z

7

If you debug what $(html) does, you will notice it only creates the DOM tree for the “usefull” contents, here the div#test block (it strips the html and body containers). Thing is, find() looks for children of the element you're calling it from. As the root element of $(html) is already your div#test element, you will not be able to search for itself using find.

This also explains why wrapping a “container” element makes your code work.

EDIT A simple workaround would be, as the OP said, to warp the html into a container such as a div:

var content = $('<div/>').append(html);
content.find('#test'); // returns the right div

edited Apr 9, 2011 at 9:59

answered Apr 9, 2011 at 7:55

zopieux

2,9002 gold badges27 silver badges32 bronze badges

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

4 Comments

user447356 Over a year ago

+1 of course, however this will also work using the first HTML: alert($(html).find('#test').andSelf().html()); :)

Philip Walton Over a year ago

Upon further inspection, this does not work. Try your same alert but instead of passing #test, pass #wrongid. You'll see it still (incorrectly) alerts the html from #test.

zopieux Over a year ago

Indeed, this code doest not do what I was expecting. My explanation remains right but your workaround is imho the simplest working trick. I'm editing the answer.

Philip Walton Over a year ago

Yes, I would not have come up with my solution without your and Effata's answers.

Effata · Accepted Answer · 2011-04-09 08:00:19Z

2

It seems the jQuery parser strips away everything but the body. If you do a console.log you get these results:

html = '<html><body><div id="test">This is just a test</div></body></html>';
console.log( $(html) );
= [<div id="test">This is just a test</div>]

Which means you run find on the #test div itself, hence you won't get a result.

answered Apr 9, 2011 at 8:00

Effata

2,3422 gold badges15 silver badges11 bronze badges

Comments

Philip Walton · Accepted Answer · 2011-04-09 09:19:44Z

Thank you @Effata and @Zopieux for helping me figure this out. @Effata, unfortunately your trick doesn't seem to work. If you pass it an incorrect selector (such as #wrongid), it still seems to return the contents of #test.

Here is the solution I found that seems to work for all situations. Basically all I'm doing is wrapping the HTML in a <div> before executing the .find() method.

html = '<html><body><div id="test">This is just a test</div></body></html>';
alert( $("<div />").append(html).find("#test").html() );

Collectives™ on Stack Overflow

Possible jQuery bug parsing HTML

3 Answers 3

4 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Related