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.
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 n
th element of the matching element set, whereas :nth-child(n)
matches the n
th child of the parent.
You should use after()
or insertAfter()
http://api.jquery.com/category/manipulation/dom-insertion-outside/
$('<option val="position3">Position3</option>').insertAfter('#list :nth-child(<give childnumber here>)')
index start with 1
Check insertAfter
here