Reputation: 501

How to add a list-item at specific position

I'd like to add a <li> at a specific position, for example:

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

Let's say that I want to add a new <li> below/after <li>Position 2</li>, how can I do it using jQuery?

I've tried to do it using the code below:

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

But, it didn't work, because it appends the <li> inside the <li>Position 2</li>, instead add the <li> below/after the <li>Position 2</li>.

Can someone give me some help?

Thank you.

Upvotes: 50

Answers (4)

Reputation: 347

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

index start with 1

Upvotes: 3

Reputation: 775

Upvotes: 9

Reputation: 816384

You have to use after() instead of append():

Description: Insert content, specified by the parameter, after each element in the set of matched elements.

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

The documentation of append() clearly says:

Insert content (...) to the end of each element.

For completeness:

Note that :eq(n) matches the nth element of the matching element set, whereas :nth-child(n) matches the nth child of the parent.

Upvotes: 85

Reputation: 17472

Check insertAfter here

Upvotes: 2