Add spans to characters in a string (in an HTML element)
<p>I want to loop through the characters of a text in an element and add <code>span</code>s to the characters. This is pretty easy using <a href="http://api.jquery.com/jQuery.map/" rel="nofollow"><code>jQuery.map()</code></a>:</p>

<pre><code>$elem = $('h1');
var chars = jQuery.map($elem.text().split(''), function(c) {
  return '&lt;span&gt;' + c + '&lt;/span&gt;';
});
$elem.html(chars.join('')); 
</code></pre>

<p>The above <a href="http://jsfiddle.net/F7KqP/" rel="nofollow">works great with a simple string</a>, but now I want to change the function so that it also will handle more 'complex' contents like: <code>&lt;h1&gt;T&lt;em&gt;e&lt;/em&gt;&lt;b&gt;st&lt;/b&gt;&lt;/h1&gt;</code>. Which should be translated to: <code>&lt;h1&gt;&lt;span&gt;T&lt;/span&gt;&lt;em&gt;&lt;span&gt;e&lt;/span&gt;&lt;/em&gt;&lt;b&gt;&lt;span&gt;s&lt;/span&gt;&lt;span&gt;t&lt;/span&gt;&lt;/b&gt;&lt;/h1&gt;</code>.</p>

<p>This means I cannot simply loop through all the characters in the element anymore. Is there something I can use to loop through the contents (characters) of an element as well as all children? Or is there another way of achieveing what I want?</p>
