Insert item into unordered list at a given index with Jquery

Question

I have:

<ul>

<li>Cthulhu</li>
<li>Godzilla</li>
<li>King Kong</li>

</ul>

I want to insert <li>Pink Panther</li> after Godzilla (index 2). How can I do this?

Answer 1

You can use the after() method with the :eq() selector:

$("ul li:eq(1)").after($("<li>Pink Panther</li>"));

Note that, since :eq() is zero-based, Godzilla has index 1 instead of 2.

Answer 2

You can use eq and after like this:

$('#ul_id li:eq(1)').after('<li>Pink Panther</li>');

For eq index starts from 0 so 1 corresponds to <li>Godzilla</li>.