traversing element content with jquery and greasemonkey

Question

I have a question about traversing a newly created element with jquery and greasemonkey.

I have this javascript snippet:

var content="some html string"
var el = $( '<div></div>' );
el.html(content);
GM_log(el.html());

The html string I added to the new div is something like:

Hello:<br> world<br> <img src="someimage.jpg" align="absmiddle" border="0">
<font color="#FF0000"> hello<br>
<img src="otherimage.gif" align="absmiddle" border="0"> 
test</font><br>    
----------

I am looking for a way to traverse the newly created div and access each tag/text separately .
for example, if I do:

GM_log(el.children());

I can only access the whole children instead of the single pieces of text/tag.
Can anyone suggest me how to do so?

Answer 1

You can use find('*') to get all children and each() to traverse them.

el.find('*').each(function(){
    alert(this.tagName);
    alert($(this).html());
    alert($(this).text());
});

Answer 2

Use find() to fetch all descendant elements not just the direct children of the target element

GM_log(el.find('*'));