Как добавить элементы внутри тега привязки и вставить слово с помощью JQuery?

Question

В основном я хочу добавить <span></span> внутри тега привязки, но за пределами «дома». Я думаю, это должно быть легко, но я только начал использовать jQuery.

Так что:

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

Если в конечном итоге, как это с Jquery:

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

Мой 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> 

Мой 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; 
outline: 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; 
} 

Мои JS:

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

Answer 1

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

Как-то StackOverflow очищает мою разметку. В вызове 'wrap' должно быть <span></span>.

Answer 2

Попробуйте это:

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