JQuery append to an element its own content

I would need to append a <span> element to an anchor element, with its content. Lik开发者_运维技巧e this:

<div class="button"><a href="#">content text</a></div>

I need this:

<div class="button"><a href="#">content text<span>content text</span></a></div>

I try it in jQuery, but I can't put the content:

$('.butt a').append('<span>'+???+'</span>');

Please help me, if you can! Thank you!

You can pass a function to .append(), like this:

$('.button a').append(function(i, html) { return '<span>'+html+'</span>'; });

You can test it out here, or a bit safer DOM approach (what I'd go with):

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

You can test that version here. In both of the above cases the html the function receives is the current html/text inside the <a> you're appending to...which works out perfect here.

Your problem is because you're trying to select the butt class - but your class is button:

$('.button a').append('<span>Your span text here</span>');