On May 16, 9:41 pm, Marie du Toit <[EMAIL PROTECTED]> wrote:
> 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>*":
prepend and append insert an *element*, not a tag.
Iterate over the A elements, get their text content, use it to create
a textNode, append that to a span, replace all the A's childNodes with
the span.
e.g.
function wrapTextContentInSpan(el) {
var txt = el.textContent || el.innerText;
while(el.firstChild) el.removeChild(el.firstChild);
el.appendChild(document.createTextNode(txt));
}
Maybe someone can convert that to something more jQuery-esque.
--
Rob
