Question

I am trying to append a list element dynamically to already existing list.

I’ve a list in the form,

<ul id="test">
    <li class="testField">YYAAHOOOOOO<li>
</ul>

I am trying to add an extra item to this list using jQuery append or after…

What I did was:

$(".testField").after("<li class='testField'>TEST MESSENGER</li>"); 

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 testField, but as the list grows, the after function will add the list items to all elements present,

To make it clear, on first trial I will get an output:

<ul id="test">
    <li class="testField">YYAAHOOOOOO<li>
    <li class='testField'>TEST MESSENGER</li>
</ul>

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

<ul id="test">
    <li class="testField">YYAAHOOOOOO<li>
    <li class='testField'>GOOGLE</li>
    <li class='testField'>TEST MESSENGER</li>
    <li class='testField'>GOOGLE</li>
</ul>

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?

Answer 1

Try:

$(".testField:first").after("<li class='testField'>TEST MESSENGER</li>"); 

this will make sure that you are appending after the first element only