CODEWITHSUNDEEP
javascriptjquery
user1371896
user1371896

Reputation: 2240

appending elements to a list

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?

Upvotes: 2

Views: 247

Answers (2)

Cerbrus
Cerbrus

Reputation: 72957

Alternatively, you could do this without jQuery:

var li = document.createElement('li');                       // Create a List item.
    li.setAttribute("class", "testfield");                   // Set the li's class
    li.addChild(document.createTextNode("Your Text Here!")); // Set the li's text
document.getElementById("test").addChild(li);                // Append the li to the list

It's slightly more code, yes, but it's pretty much what jQuery does under the hood. (And faster, too)

If you want to add the new ul after the first li already in the list, replace the last line with:

var ul = document.getElementById("test");
if(ul.children.length > 1){              // If the list has 2 or more children (li's)
    ul.insertBefore(li, ul.children[1]); // Insert the new item before the second item in the list.
}else{
    document.getElementById("test").addChild(li); 
}

Now, why am I posting a answer that requires more code?
Anything that can be done in jQuery can be done in native JS. I think it's good to have multiple different answers available on SO, especially if they use different techniques to do the same thing. That way, users can chose for themselves: short'n easy (jQuery), or if they don't want to use the library, native code.

Upvotes: 0

Akhil Sekharan
Akhil Sekharan

Reputation: 12693

Try:

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

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

Upvotes: 5

Related Questions