11

I want to parse a html string to jQuery object then find an element by ID.

I tried 3 ways bellow, but only the last works. I don't know why the others not works?

var html = "<html><body><div id='main'></div></body></html>";

// Not work, return 0
console.log($(html).find('#main').length); 
// Not work, return 0
console.log($($.parseHTML(html)).find('#main').length); 
// Works, return 1
console.log($("<html/>").html(html).find('#main').length);

Here is the sample: http://jsfiddle.net/nbyofkam/2/

andyf
  • 3,262
  • 3
  • 23
  • 37
  • 1
    `$(html) ==
    ` that's why you can't use `.find()` to find it.     – Anton Aug 13 '14 at 08:31
  • 1
    You can also treat the string as an XML `console.log($($.parseXML(html)).find('#main').length)` but its better to avoid unnecessary wrapping. – Yury Tarabanko Aug 13 '14 at 08:36
  • 1
    I'm puzzled... seems to me that @YuryTarabanko has given the correct answer here. Had a similar problem, und using `parseXML` instead pf `parseHTML` helps. – Zane Nov 08 '16 at 23:39

2 Answers2

10

It's documented :

When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, jQuery uses the browser"s .innerHTML property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as <html>, <title>, or <head> elements. As a result, the elements inserted may not be representative of the original string passed.

As a result, $(html) is reduced to "<div id="main"></div>". You can verify that by logging $(html)[0].outerHTML.

So you can't use find without wrapping it, which is what you do.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • 1
    As a workaround, there is something like `findAll`. https://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js#L620 – Junle Li Aug 13 '14 at 08:35
8

An alternate way to do this - 

var myTestDiv = document.createElement('div');
var mystr = '<div id="main"></div>';
myTestDiv.innerHTML = mystr;

console.log(myTestDiv.querySelector('div#main'));
Stacie
  • 235
  • 1
  • 5