JQuery | change the innert html content of ul->li->a
<p>I have the following html</p>

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

<p>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.</p>
