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

I didn't understand what you wanted to say @Deja Vu, but nevermind, as oGeez clarified, it probably won't matter anyway — tim, Apr 09 '14 at 08:21
@oGeez Alright, but it looks cleaner for me if it ends with a `;`. It was just a suggestion — Déjà vu, Apr 09 '14 at 08:22
@tim He means, quite rightly, that styles should be separated by a semi-colon. Although the last property in the block doesn't need one. More [here](http://stackoverflow.com/questions/11939595/leaving-out-the-last-semicolon-of-a-css-block) — George, Apr 09 '14 at 08:25
@tim — He is suggesting that you use `;` as a rule terminator in your CSS instead of as a rule separator. It has no bearing on your actual problem. — Quentin, Apr 09 '14 at 08:26
Ah I see, sure I know that, but for one property, it's not necessary, is it? And yes, actually no relation to my problem in any way... — tim, Apr 09 '14 at 08:27

score 4 · Accepted Answer · answered Apr 09 '14 at 08:24

4

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());

answered Apr 09 '14 at 08:24

Quentin

914,110
126
1,211
1,335

Thanks, thats very short, clean and nice – tim Apr 09 '14 at 08:34

score 2 · Answer 2 · answered Apr 09 '14 at 08:22

2

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

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

answered Apr 09 '14 at 08:22

Bhojendra Rauniyar

83,432
35
168
231

And then `elem.html()` or what? – tim Apr 09 '14 at 08:24
you would do .html() if you want elem's html – Bhojendra Rauniyar Apr 09 '14 at 08:29

score 0 · Answer 3 · answered Apr 09 '14 at 08:40

0

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

answered Apr 09 '14 at 08:40

cor

3,323
25
46

Thanks, but overhead in this case :) – tim Apr 09 '14 at 19:16

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

3 Answers3