How can I use jQuery to change my HTML so each text in an <li> is surrounded by a <span>?
<p>I have the following HTML:</p>

<pre><code>&lt;ul id="breadcrumb"&gt;
    &lt;li&gt;abc&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;xx&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;xxxxx&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>How can I use jQuery to make it so that every <code>&lt;li&gt;</code> has its contents enclosed with a <code>&lt;span&gt;</code>. Here is what I would like the HTML to look like:</p>

<pre><code>&lt;ul id="breadcrumb"&gt;
    &lt;li&gt;&lt;span&gt;abc&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;xx&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span&gt;xxxxx&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Please note. It's possible that some of the contents of the <code>&lt;li&gt;</code> are already enclosed in a <code>&lt;span&gt;</code>. I don't want to do anything to those.</p>
