insert element in the first and last part of the specified element
<p>I have this code.</p>

<pre><code>&lt;ul class="menu"&gt;
    &lt;li class="current_page_item"&gt;&lt;a href="http://localhost/wordpress/"     title="Home"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item page-item-8"&gt;&lt;a href="http://localhost/wordpress/?page_id=8"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item page-item-23"&gt;&lt;a href="http://localhost/wordpress/?page_id=23"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item page-item-7"&gt;&lt;a href="http://localhost/wordpress/?page_id=7"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>What I want is to insert a span () element inside the ul (.menu). I want to put it before the first <code>li</code> and to the the last <code>li</code> inside that <code>ul</code> (.menu). So the expected output should be this.</p>

<pre><code>&lt;ul class="menu"&gt;
    &lt;span&lt;&gt; &lt;!-- this is the inserted element --&gt;
    &lt;li class="current_page_item"&gt;&lt;a href="http://localhost/wordpress/"     title="Home"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item page-item-8"&gt;&lt;a href="http://localhost/wordpress/?page_id=8"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item page-item-23"&gt;&lt;a href="http://localhost/wordpress/?page_id=23"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;li class="page_item page-item-7"&gt;&lt;a href="http://localhost/wordpress/?page_id=7"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
    &lt;/span&lt;&gt; &lt;!-- this is the inserted element --&gt;
&lt;/ul&gt;
</code></pre>

<p>What I've tried so far is this.</p>

<pre><code>$(document).ready(function(){
    $('&lt;span&gt;').insertBefore('.menu li:first-child');
    $('&lt;/span&gt;').insertBefore('.menu li:last-child');
});
</code></pre>

<p>I'd appreciate any help on this matter.</p>
