How to add LI in UL in arbitrary position using jQuery

Question

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?

Answer 1

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>');

Answer 2

尝试前置 。

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