[jQuery] wrap span tags around the contents/text of a link

[Marie du Toit]

Hi,

I am trying to wrap <span></span> elements around the text within <a 
href="#"></a> elements, like this:

*before:*

<ul id="mainlevel">
   <li><a href="#" class="mainlevel">Link</a></li>
   <li><a href="#" class="mainlevel">Another Link</a></li>
   <li><a href="#" class="mainlevel">Some Other Link</a></li>
</ul>


*after:*

<ul id="mainlevel">
   <li><a href="#" class="mainlevel">*<span>*Link*</span>*</a></li>
   <li><a href="#" class="mainlevel">*<span>*Another Link*</span>*</a></li>
   <li><a href="#" class="mainlevel">*<span>*Some Other 
Link*</span>*</a></li>
</ul>

I have been trying combinations of almost all the jquery manipulation 
functions, but couldn't get it right. The following seemed like a 
solution (although not elegent), but for some reason the prepended 
opening span automatically got a closing span tag, and the appended 
closing span  automatically got a opening span tag leaving me with 
"*<span></span>*Some Other Link*<span>**</span>*":

$("#mainlevel/li/a").prepend('<span>');
$("#mainlevel/li/a").append('</span>');

Any ideas? I'm testing in Firefox 2.0.0.3

Thanks, Marie