如何在特定位置添加列表项

Question

我想在特定位置添加<li>，例如：

<ul id="list">
    <li>Position 1</li>
    <li>Position 2</li>
    <li>Position 4</li>
<ul>

假设我想在<li>之下/之后添加一个新的<li>Position 2</li>，我该如何使用jQuery？

我尝试使用以下代码执行此操作：

$('#list li:eq(1)').append('<li>Position 3</li>');

但是，它不起作用，因为它将<li>添加到<li>Position 2</li>内，而是在<li>之后/之后添加<li>Position 2</li>。

有人可以给我一些帮助吗？

谢谢。

Answer 1

您必须使用after()代替append()：

  

描述：在匹配元素集中的每个元素之后插入由参数指定的内容。

$('#list li:eq(1)').after('<li>Position 3</li>');

---

append()的文档清楚地说：

  

将内容（...）插入每个元素的结尾。

---

为了完整性：

请注意:eq(n)匹配匹配元素集的n元素，而:nth-child(n)匹配父项的n子元素。

Answer 2

您应该使用after()或insertAfter()
http://api.jquery.com/category/manipulation/dom-insertion-outside/

Answer 3

$('<option val="position3">Position3</option>').insertAfter('#list :nth-child(<give childnumber here>)')

索引以1开始

Answer 4

检查insertAfter here