Ajax Response Finding HTML Fragments Using Find

I was doing some test with JQuery find , I have an html response coming from an AJAX request, so initially the result would be this.

Solution 1:

As far as I know it is a browser dependent behavior to which tags to drop as a measure of sanitation, e.g. <head/>.

The reason for not finding #dashboard while executing

$(response).find('#dashboard')

is most probably because #dashboard has become the root element after the sanitation, and .find() matches against the descendant elements not on the root itself.

I normally to avoid this problem do this over an empty <div>.

$("<div/>").html(response).find('#dashboard')

Solution 2:

jQuery strips everything except the contents of the body, so #dashboard is at the top level so find would actually be searching for descendants of #dashboard. Since #dashboard is at the top level you can use filter to select it out of the other top level nodes.

http://jsfiddle.net/mowglisanu/SqL9Q/