如何使用jQuery在UL中的任意位置添加LI

时间:2013-04-01 18:15:01

标签: javascript jquery

我想在现有的UL中添加LI。我的HTML是这样的:

<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>

我知道我可以用它在和

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

但它会添加到最后位置,我想在第一个位置或中间添加它。如何指定我想插入LI的位置?

2 个答案:

答案 0 :(得分:7)

您必须使用prepend()代替append

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

要附加到特定位置,您可以使用eq()

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

答案 1 :(得分:3)

尝试prepend

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