Can jQuery find elements before they're appended to the document?

Question

I'm finding that HTML/DOM created via $() is not searchable until it's been appended to the document. Is this expected, or am I doing something wrong?

var html = "<div data-test='test'>testdiv</div>";

// Convert HTML string to an orphaned JQ DOM object
var dom = $(html);

// Search orphaned DOM for element(s) with the specified attr
var found1 = dom.find('[data-test]');
// --> found1.length == 0, why not 1?

// Now insert the orphaned DOM into the document
$('#content').html(dom);

// And now JQ will find the desired elements
var found2 = $('[data-test]');
// --> found2.length is 1, as expected

Here's a demo: http://jsfiddle.net/5dVc8/

UPDATE

It turns out that my original question was too simplistic.

@RocketHazmat's answer did indeed address what I had originally asked, but when I went to use that info I found that I wasn't specific enough.

It turns out that I need to match elements in the root AND/OR the children. Seems that, as @RocketHazmat says, .find() matches children but .filter() only matches the root.

Here's updated snippet and a new fiddle to demo:

var html = "<div data-test='test1'>";     // Root
html += "<div data-test='test2'></div>";  // Child
html += "</div>";

// Convert HTML string to an orphaned JQ DOM object
var dom = $(html);

// Search orphaned DOM object for element(s) with the specified attr
// (We'll find none)
var found1 = dom.find('[data-test]');
$('#count1').html('count1='+found1.length+", val="+found1.attr('data-test'));

// Search orphaned DOM object for element(s) with the specified attr
// (We'll find none)
var found2 = dom.filter('[data-test]');
$('#count2').html('count2='+found2.length+", val="+found2.attr('data-test'));


// Now append the orphaned DOM to the document
$('#content').html(dom);

// And now JQ will find the desired elements
var found3 = $('[data-test]');
$('#count3').html('count3='+found3.length);

and the updated fiddle: http://jsfiddle.net/XyDSg/2/

Answer 1

Try using .filter() instead of .find().

var found1 = dom.filter('[data-test]');

.find() searches all children. In your case, '[data-test]' is the "root" element, so you need .filter().

UPDATE:

You can wrap your HTML in another <div>, then .find() would work as you want.

var dom = $('<div>'+html+'</div>');
var found1 = dom.find('[data-test]');

Just remember to remove it when you append it elsewhere.

$('#content').html(dom.html()); // This "removes" the parent `<div>`