add span tag within anchor in jquery

Question

How to add span tag within anchor, changing it from

<a href="somewhere.html">Here is the link to somewhere.</a>

to this with jquery

<a href="somewhere.html">
<span>Here is the span content.</span>
Here is the link to somewhere.
</a>

Answer 1

Look up html() function in jQuery docs and use it to change anchor content.

Answer 2

Try this:

$('a').each(function() {
     $(this).prepend('<span>This is the span content</span>');
});

This will add a span tag to the start of each and every a element on the page. If you want to restrict the modifying to some specific elements, add a class to them and call them with something like $('a.myclass').each(...

Answer 3

Add a way to select the link :

<a id="myLink" href="somewhere.html">Here is the link to somewhere.</a>

The do some jQuery :

var $link = jQuery("#myLink");
$link.html( "<span>blah</span>" + $link.html() );

An even cooler way of doing this would be using prepend :

jQuery("#myLink").prepend("<span>blah</span>");

Answer 4

Maybe this will work:

$('a').each(function()
{
  $(this).wrapInner("<span></span>");
});

JQuery docs