appending elements to a list
<p>I am trying to append a list element dynamically to already existing list.</p>

<p>I've a list in the form,</p>

<pre><code>&lt;ul id="test"&gt;
    &lt;li class="testField"&gt;YYAAHOOOOOO&lt;li&gt;
&lt;/ul&gt;
</code></pre>

<p>I am trying to add an extra item to this list using jQuery append or after...</p>

<p>What I did was:  </p>

<pre><code>$(".testField").after("&lt;li class='testField'&gt;TEST MESSENGER&lt;/li&gt;"); 
</code></pre>

<p>Used after function as append did not work, the after function works fine first time as there is only one element with the class name <code>testField</code>, but as the list grows, the after function will add the list items to all elements present,</p>

<p>To make it clear, on first trial I will get an output:</p>

<pre><code>&lt;ul id="test"&gt;
    &lt;li class="testField"&gt;YYAAHOOOOOO&lt;li&gt;
    &lt;li class='testField'&gt;TEST MESSENGER&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>If I try the to add another element now for example <code>&lt;li class='testField'&gt;GOOGLE&lt;/li&gt;</code>, the output will be like:</p>

<pre><code>&lt;ul id="test"&gt;
    &lt;li class="testField"&gt;YYAAHOOOOOO&lt;li&gt;
    &lt;li class='testField'&gt;GOOGLE&lt;/li&gt;
    &lt;li class='testField'&gt;TEST MESSENGER&lt;/li&gt;
    &lt;li class='testField'&gt;GOOGLE&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I thought about using ids, but I am trying to have an option to remove elements from the list too... So if I try to append to an undefined id, it will return error. Is there anyway to find the first element inside a list and append the element to that first one?</p>
