Add html Using JQuery

I have this:

        <span class="mad">2</span> Stuff

</li>

I want this

            <a href="/My/Website"><span class="mad">2</span&g开发者_StackOverflowt; Website</a>

    </li>

Can someone give me some jquery to do this? Also "/My/Website" has to be changed to something different for each li...is this possible?

Using each, you can give each li span.mad a different website url

$("li span.mad").each(function(i,e) {
 $(e).html(
    "<a href='/My/Website/"+ (i+1) +"'>"+$(e).html()+"</a>");
});

http://jsfiddle.net/6EzDs/

(or using wrap)

$("li span.mad").each(function(i,e) {
 $(e).wrap("<a href='/My/Website/"+ (i+1) +"' />");
});

Give each li a unique class name and use the wrapp function

$('span .class1').wrap('<a href="class1 url"/>')

$("span.mad").wrap("<a href='/My/Website' />");

Or, if you want to go by id instead of class name

$("#someSpanID").wrap("<a href='/My/Website' />");