how to insert a new li tag at the specified location?
<p>I wanted to insert a li tag in the middle of a list of li tags based on a css class set to the li tag using jQuery. Consider the following</p>

<pre><code>&lt;ul class="myList"&gt;
     &lt;li&gt;&lt;a href="#"&gt;test 1&lt;/a&gt;&lt;/li&gt;
     &lt;li class="active"&gt;&lt;a href="#"&gt;test 2&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;test 3&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;test 4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;test 5&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;test 6&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I wanted to insert a new li tag after the li tag set to active. So the output will be like this.</p>

<pre><code>&lt;ul class="myList"&gt;
     &lt;li&gt;&lt;a href="#"&gt;test 1&lt;/a&gt;&lt;/li&gt;
     &lt;li class="active"&gt;&lt;a href="#"&gt;test 2&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;My new Tag&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;test 3&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;test 4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;test 5&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;test 6&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I tried with .appendTo, .insertAfter, .append etc. but could not get the result I wanted. Any idea how this can be achieved?</p>
