[jQuery] wrap span tags around the contents/text of a link
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
Hi,
I am trying to wrap <span></span> elements around the text
within <a href="#"></a> elements, like this:
<b>before:</b>
<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>
<b>after:</b>
<ul id="mainlevel">
<li><a href="#" class="mainlevel"><b><span></b>Link<b></span></b></a></li>
<li><a href="#" class="mainlevel"><b><span></b>Another
Link<b></span></b></a></li>
<li><a href="#" class="mainlevel"><b><span></b>Some
Other Link<b></span></b></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 "<b><span></span></b>Some
Other Link<b><span></b><b></span></b>":
$("#mainlevel/li/a").prepend('<span>');
$("#mainlevel/li/a").append('</span>');
Any ideas? I'm testing in Firefox 2.0.0.3
Thanks, Marie
</body>
</html>