title: how to use wrapInner() to wrap a certain content inside ah html tag?
body: <p>I've got HTML code like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul class="table"&gt;
    &lt;li&gt;Height: 70cm&lt;/li&gt;
    &lt;li&gt;Width: 100cm&lt;/li&gt;
    &lt;li&gt;Depth: 400cm&lt;/li&gt;
    &lt;li&gt;Color: yellow&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Now, I would like it to look like this (insert those <strong>span</strong> tags inside; note that there's always a string ":"):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul class="table"&gt;
    &lt;li&gt;&lt;span class="name"&gt;Height:&lt;/span&gt; &lt;span class="value"&gt;70cm&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="name"&gt;Width:&lt;/span&gt; &lt;span class="value"&gt;100cm&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="name"&gt;Depth:&lt;/span&gt; &lt;span class="value"&gt;400cm&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="name"&gt;Color:&lt;/span&gt; &lt;span class="value"&gt;yellow&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I've tried something like:</p>
  
  <pre class="lang-js prettyprint-override"><code>$('ul.table li').html().replace('&lt;li&gt;', '&lt;li&gt;&lt;span class=name&gt;');
  $('ul.table li').html().replace(':', ':&lt;/span&gt;&lt;span class=value&gt;');
  $('ul.table li').html().replace('&lt;/li&gt;', ':&lt;/span&gt;&lt;/li&gt;');
  </code></pre>
  
  <p>But it didn't work. Is this possible to do with jQuery, for example with <code>wrapInner()</code>, or another similar method?</p>