how to append an element between two elements

Question

I have a List

     <ul>
           <li id="lst1"> list item One</li>
           <li id="lst2"> list item two</li>
           <li id="lst3"> list item three</li>
           <li id="lst4"> list item four</li>
           <li id="lst5"> list item five</li>
     </ul>

and i want to append an item between (not inside) "lst2" and "lst3" i don't know how using jquery. Thanks.

Solution 1

$('#lst3').before('<li id="lst21"> list item three</li>');

You may try this.

Solution 2

You can use after^doc or insertAfter^doc:

$('#lst2').after('a');
$('a').insertAfter('#lst2');

Solution 3

Use insertAfter():

$('<li id="newListElement" />').text('new list item').insertAfter('#lst2');

JS Fiddle demo.

References:

• insertAfter().