jquery prepend <span> without automatically adding the closing tag

Question

I am trying to add a <span> tag around the contents of the <a> tag.

The HTML renders without js like this: <a href="#">Link Here</a>

I would like to add the <span> inside the link like this: <a href="#"><span>Link Here</span></a>

My idea was to 'prepend' the opening span and 'append' the closing tag to the a, however I can't get past the prepend. When I try to prepend the 'span' it automatically adds the closing </span> tag. Here is the script I'm using

$(document).ready(function () {
    $('a.button2').prepend('<span>');
});

Here is what it is rendering:

<a href="#"><span></span>Link Here</a>

Is there a way to prepend ONLY the opening tag so that I can append the closing later, or another solution to this problem?

Answer 1

Use wrapInner() to wrap the contents of the a.button2 element in a span:

$('a.button2').wrapInner('<span />');