Using jQuery to search a string of HTML

Question

If I run this code -

var html= '<html><head></head><body><div class="bar"></div></body></html>';
console.log($(html).find('div'));

I get no results returned, if I run this code -

var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>';
console.log($(html).find('div'));

Then I get a single result returned - the inner div (<div class="bar"></div>). I would have expected the first code snippet to return a single result and the second snippet two results.

Similarly, this code returns no results -

var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
console.log(code.find('div'));

but this code alerts 'div' twice -

var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
code.each(function() {
    alert( this.nodeName );
})

Given the result of the second snippet, I would have expected the first code snippet to return two results. Could someone please explain why I'm getting the results I'm getting?

http://jsfiddle.net/ipr101/GTCuv/

I changed `console.log` to `alert`, and it alerted `[object Object]`, so it must've found something... — Eran Zimmerman Gonen, Aug 23 '11 at 10:19
@Eran Zimmerman: That's because jQuery always returns an object, regardless of the amount of matches found for the selector. — Björn, Aug 23 '11 at 10:21
I presume [object Object] refers to the empty array jQuery returns. — ipr101, Aug 23 '11 at 10:22

Digital Plane · Accepted Answer · 2011-08-23T10:38:07.817

Let's split this question into two parts.

First:

var html= '<html><head></head><body><div class="bar"></div></body></html>';
console.log($(html).find('div'));

and

var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>';
console.log($(html).find('div'));

do not work because according to the jQuery() docs:

When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, we use 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.

In the first code block, your <html>, <head>, and <body> tags are getting stripped out, and <div class="bar"></div> remains. find only searches inside the resulting <div>, and cannot find anything.
In the second code block, your <html>, <head>, and <body> tags are getting stripped out, and <div><div class="bar"></div></div> remains. find searches inside the result, and finds a single <div>.

As for your second part:

var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
console.log(code.find('div'));

You first give jQuery a string, which it takes and makes into a jQuery object with the two <div>'s. Then, find searches in each <div>, finds nothing and returns no results.

Next, in

var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
code.each(function() {
    alert( this.nodeName );
})

each loops through the jQuery object, taking each of the two created <div>'s, and alerts their node name. Therefore, you get two alerts.

score 20 · Answer 2 · answered Aug 23 '11 at 12:01

the answer is very simple. when you make object using jQuery(html) then it make an hierarchy of nodes, and when you find some node like 'div', it searches in whole hierachy except root elements, and in your first example, you dont have child 'div' nodes. And in your second example you have only one child 'div' node.

so if you keep one extra root node in whole hierarchy, then you can find all your nodes easily. like

var html= '<html><head></head><body><div class="bar"></div></body></html>';
console.log($('<div></div>').append(html).find('div'));

var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>';
console.log($('<div></div>').append(html).find('div'));

this is how it should be done. The accepted answer won't work if there are more than 1 root element. — ProblemsOfSumit, Feb 09 '15 at 14:46
That'(s the correct answer. An alternative writing that works for me is `$('
'+html+'
').find('div')` — rAthus, Jun 03 '21 at 09:28

score 7 · Answer 3 · edited Dec 13 '17 at 20:56

7

The simple way is as follows:

Given the string:

var html= '<html><head></head><body><div class="bar"></div></body></html>';

Search for the div with the class bar:

$(html).filter('.bar')

Or all divs:

$(html).filter('div')

Returns the object with the class bar

edited Dec 13 '17 at 20:56

Aaron Fahey

699
1
7
20

answered Jan 12 '17 at 19:11

Jeff

99
1
7

great! you save my day! – Darlan Dieterich Jan 31 '18 at 00:37

score 2 · Answer 4 · answered Aug 23 '11 at 10:19

.find in the third example, searches children in each matched element. Inside your divs there are no div children (they don't have any children), so .find(anything) will not return any element.

.each, on the other hand, iterates over the current elements in the set, which does include the divs (there are two matched elements - the divs).

As for <html> in your first example, I'm not sure - perhaps you're not allowed to create a second <html> element after the page has loaded. $('<html><head></head><body><div class="bar"></div></body></html>'); only returns the div so .find does not return anything.

jQuery (or more accurately, the browser) removes the `html`, `head` and `body` tags and only keeps the `body` content. — Felix Kling, Aug 23 '11 at 10:19

Using jQuery to search a string of HTML

4 Answers4

Linked