Как добавить элемент списка в определенной позиции

Я хотел бы добавить <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>.

Может ли кто-нибудь помочь мне?

Спасибо.

Ответ 1

Вы должны использовать after() вместо append():

Описание: Вставить содержимое, указанное параметром, после каждого элемента в наборе согласованных элементов.

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

В документации append() четко сказано:

Вставить содержимое (...) в конец каждого элемента.

Для полноты:

Обратите внимание, что :eq(n) соответствует элементу n -го элемента соответствующего набора элементов, тогда как :nth-child(n) соответствует n th child родителя.

Ответ 2

Вы должны использовать after() или insertAfter()
http://api.jquery.com/category/manipulation/dom-insertion-outside/

Ответ 3

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

начинается с 1

Ответ 4

Отметьте insertAfter здесь