How to append elements inside an anchor tag and enclosing a word using Jquery?

Basically I want to append <span></span> inside the anchor tag but outside of "home". I guess it should be easy but I just started using jQuery.

So this:

<li class="home"><a href="index.php">home</a></li>

Should end up like this with Jquery:

<li class="home"><a href="index.php"><span>home</span></a></li>

My HTML:

<ul id="navigation"> 
   <li class="home"><a href="index.php">home</a></li>
   <li class="portfolio"><a href="portfolio.php">portfolio</a></li>
   <li class="about"><a href="about.php">about</a></li>
   <li class="contact"><a href="contact.php">contact</a></li>
  </ul>

My CSS:

ul#navigation {
 height: 20px;
 float: left;
 list-style: none;
 width: 100%;
}
ul#navigation li {
 float: left;
 margin: 0 4px 0 0;
}
ul#navigation li a {
 background: url(../images/tab.png);
 color: #C0C0C0;
 display: block;
 float: left;
 font-size: 14px;
 height: 20px;
 outlin开发者_运维百科e: none;
 padding-left: 10px;
 text-decoration: none;
}
ul#navigation li a:hover {
 background-position: 0 -20px;
 color: #666;
}
#home li.home a, #portfolio li.portfolio a{
 background-position: 0 -20px;
 color: #666;
}
ul#navigation span {
 background: url(../images/tab.png) 100% 0;
 display: block;
 line-height: 20px;
 padding-right: 20px;
}
ul#navigation li a:hover span {
 background-position: 100% -20px;
}
#home li.home span, #portfolio li.portfolio span {
 background-position: 100% -20px;
}

My JS:

$(document).ready(function() {
    $('li.home a').wrapInner('<span></span>')
});

---

$("li.home a").wrapInner("<span></span>")

Somehow StackOverflow clears my markup. There should be<span></span> inside the 'wrap' call.

---

Try this:

$('.home a').each(function(){
    var content = $(this).html();
    $(this).html('<span>'+content+'</span>');
});