Clone element with class

Question

How to clone content of the element with class and put it into itself?
Here is example. We have this:

<div class="cloneThis">one</div>
<div class="cloneThis">two</div>

The result must be like

<div class="cloneThis">one<span>one</span></div>
<div class="cloneThis">two<span>two</span></div>

I tried something like

$('.cloneThis', this).append('<span>'+$('.cloneThis', this).html()+'</span>');

but it returns first element of class and put it into all other. Is there any way to solve this?

Answer 1

$('.cloneThis', this).each(function() {
 $(this).append('<span>' + $(this).html() + '</span>');
});

Answer 2

.append() takes a function, like this:

$('.cloneThis').append(function(i, html) { return $('<span>').html(html); });
//or:
$('.cloneThis').append(function(i, html) { return $('<span>', { html:html }); });

You can test it out here.