Question

I have the following html

    <ul class="links main-menu">
    <li class="menu-385 active-trail first active"><a class="active" title="" href="/caribootrunk/">HOME</a></li>
    <li class="menu-386 active"><a class="active" title="" href="/caribootrunk/">FIND LOCAL PRODUCTS</a></li>
    <li class="menu-387 active"><a class="active" title="" href="/caribootrunk/">DO BUSINESS LOCALLY</a></li>
    <li class="menu-388 active"><a class="active" title="" href="/caribootrunk/">LOCAL NEWS &amp; EVENTS</a></li>
    <li class="menu-389 active"><a class="active" title="" href="/caribootrunk/">BLOG</a></li>
    <li class="menu-390 last active"><a class="active" title="" href="/caribootrunk/">ABOUT US</a></li>
    </ul>

I am new to jquery. What I want is i want to wrap inner html of anchor tag(e.g. Home etc) in in a span. I want this functionality through jquery on document ready.

Answer 1

You can use jQuery’s contents() to get everything (textNodes and child elements) then wrap them all with wrapAll().

$(function(){
    $('.main-menu a')   //your target
        .contents()           //get target contents (elements and textNodes)
        .wrapAll('<span>');   //wrap them all with a span

});

If you want to wrap each text nodes and elements inside <a> with span, let’s modify the code a bit, now using wrap():

$(function(){
    $('.main-menu a')   //your target
        .contents()           //get target contents (elements and textNodes)
        .wrap('<span>');      //wrap each with span
});

jQuery is pretty verbose in their method names, you can search what you want to do, and they have an equivalent method for it.