CODEWITHSUNDEEP
javascriptjquery
Kabir
Kabir

Reputation: 2156

How to add LI in UL in arbitrary position using jQuery

I want to add LI in my existing UL. My HTML is like this:

<ul id="friends">
    <li><a href="javascript:void(0);" class="new">Friend 2</a></li>
    <li><a href="javascript:void(0);" class="new">Friend 3</a></li>
    <li><a href="javascript:void(0);" class="new">Friend 4</a></li>
    <li><a href="javascript:void(0);" class="offline">Friend 6</a></li>
    <li><a href="javascript:void(0);" class="offline">Friend 7</a></li>
    <li><a href="javascript:void(0);" class="invited">Friend 8</a></li>
</ul>

i know i can use it to add LI at the and

$("#friends").append('<li><a href="javascript:void(0);" class="new">Friend 1</a></li>');

But it will add in last position and i want to add it at first position or in middle. How to specify the position at which I want to insert the LI?

Upvotes: 2

Views: 4711

Answers (2)

Siamak Motlagh
Siamak Motlagh

Reputation: 5136

Try prepend.

$("#friends").prepend('<li><a href="javascript:void(0);" class="new">Friend 1</a></li>');

Upvotes: 3

Adil
Adil

Reputation: 148110

You have to use prepend() instead of append

$("#friends").prepend('<li><a href="javascript:void(0);" class="new">Friend 1</a></li>');

To append at particular position you can use eq()

$("#friends li").eq(4).append('<li><a href="javascript:void(0);" class="new">Friend 1</a></li>');

Upvotes: 9

Related Questions