Using jQuery to search a string of HTML

by

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.

More Related Contents:

  1. How can I know which radio button is selected via jQuery?
  2. Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
  3. Should all jquery events be bound to $(document)?
  4. Get selected text from a drop-down list (select box) using jQuery
  5. jQuery selector regular expressions
  6. Assign click handlers in for loop
  7. How can I select an element by name with jQuery?
  8. jQuery selector for inputs with square brackets in the name attribute
  9. jQuery selectors on custom data attributes using HTML5
  10. How can I get selector from jQuery object
  11. Select all elements that have a specific CSS, using jQuery
  12. jQuery function to get all unique elements from an array?
  13. Testing if a checkbox is checked with jQuery
  14. jQuery : select all element with custom attribute [duplicate]
  15. Selecting multiple classes with jQuery
  16. Case insensitive jQuery attribute selector
  17. Not class selector in jQuery
  18. jQuery single selector vs .find()
  19. jQuery Selector + SVG Incompatible?
  20. Store jquery selector in variable
  21. jQuery: Check if div with certain class name exists
  22. Is there a ‘has focus’ in JavaScript (or jQuery)?
  23. jQuery :contains(), but to match an exact string
  24. Getting a jQuery selector for an element
  25. In jQuery, is selecting by class or id faster than selecting by some other attribute?
  26. Getting the “match” object in a Custom Filter Selector in jQuery 1.8
  27. Combine two selectors with one jQuery object
  28. How to select empty inputs (value=””) using jQuery
  29. jQuery difference between :eq() and :nth-child()
  30. jQuery selector to target any class name (of multiple present) starting with a prefix?

Leave a Comment