jQuery: Get inner HTML from a HTML code within a variable

Question

I have a variable which contains a html element:

alert(aData[3]);

gives me:

BLA BLA BLA
<div style="display: none">
 <table>....</table>
</div>

I'm trying to figure out how to get the contents WITHIN the div-tag from the variable aData[3] via jQuery. I tried various things:

elem = $(aData[3]).find("div");
alert(elem.html());

// OR
elem = $(aData[3]).find("div");
alert(elem[0].html());

// OR
elem = $(aData[3]).find("div");
alert($(elem[0]).html());

// OR
elem = $(aData[3], 'div');
alert(elem.html());

Can't get any of those to work. How to the correct version? :( Thanks a lot

Answer 1

find looks for descendants of elements in the jQuery object, but div is the highest level element in your HTML (it isn't a descendant of anything).

Just don't use find.

elem = $(aData[3]);
alert(elem.html());

Answer 2

You need to wrap your string with another dom object to use .find().

elem = $('<div />',{
  html: aData[3];
}).find("div");
alert(elem);

Answer 3

You can use parseHTML to convert the string into an array of DOM elements.