title: How to append elements inside an anchor tag and enclosing a word using Jquery?
body: <p>Basically I want to append <code>&lt;span&gt;&lt;/span&gt;</code> inside the anchor tag but outside of "home". I guess it should be easy but I just started using jQuery.</p>
  
  <p>So this:</p>
  
  <pre><code>&lt;li class="home"&gt;&lt;a href="index.php"&gt;home&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Should end up like this with Jquery:</p>
  
  <pre><code>&lt;li class="home"&gt;&lt;a href="index.php"&gt;&lt;span&gt;home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;ul id="navigation"&gt; 
     &lt;li class="home"&gt;&lt;a href="index.php"&gt;home&lt;/a&gt;&lt;/li&gt;
     &lt;li class="portfolio"&gt;&lt;a href="portfolio.php"&gt;portfolio&lt;/a&gt;&lt;/li&gt;
     &lt;li class="about"&gt;&lt;a href="about.php"&gt;about&lt;/a&gt;&lt;/li&gt;
     &lt;li class="contact"&gt;&lt;a href="contact.php"&gt;contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>My JS:</p>
  
  <pre><code>$(document).ready(function() {
      $('li.home a').wrapInner('&lt;span&gt;&lt;/span&gt;')
  });
  </code></pre>