Home/ Questions/Q 6360691
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T23:40:52+00:00

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

  • 0

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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0