Inserting in a list element
<p>I have a list element like this:</p>

<pre><code>&lt;ul id="myList"&gt;
   &lt;li&gt;First&lt;/li&gt;
   &lt;li&gt;Second&lt;/li&gt;
   &lt;li&gt;Third&lt;/li&gt;
</code></pre>

<p></p>

<p>I would like to insert an element of <code>&lt;li&gt;Ex&lt;/li&gt;</code> before <code>&lt;li&gt;Third&gt;/li&gt;</code>. So far, everything I have been trying inserts <code>&lt;li&gt;Ex&lt;/li&gt;</code> as a child of <code>&lt;li&gt;Second&lt;/li&gt;</code>. I have used the following jquery methods:</p>

<p>insertAfter(), before(), after(), appendTo()... they all did the same thing. This is the what it looks like:</p>

<pre><code>&lt;ul id="myList"&gt;
   &lt;li&gt;First&lt;/li&gt;
   &lt;li&gt;Second
       &lt;li&gt;Ex&lt;/li&gt;
   &lt;/li&gt;
   &lt;li&gt;Third&lt;/li&gt;
</code></pre>

<p></p>

<p>but I want it like this:</p>

<pre><code>&lt;ul id="myList"&gt;
   &lt;li&gt;First&lt;/li&gt;
   &lt;li&gt;Second&lt;/li&gt;
   &lt;li&gt;Ex&lt;/li&gt;
   &lt;li&gt;Third&lt;/li&gt;
</code></pre>

<p></p>

<p>Any suggestions on how to fix this? Any pointers is appreciated.</p>
