how to insert a new li tag at the specified location?

Question

Hi

I wanted to insert a li tag in the middle of a list of li tags based on a css class set to the li tag using jQuery. Consider the following

<ul class="myList">
     <li><a href="#">test 1</a></li>
     <li class="active"><a href="#">test 2</a></li>
     <li><a href="#">test 3</a></li>
     <li><a href="#">test 4</a></li>
    <li><a href="#">test 5</a></li>
    <li><a href="#">test 6</a></li>
</ul>

I wanted to insert a new li tag after the li tag set to active. So the output will be like this.

<ul class="myList">
     <li><a href="#">test 1</a></li>
     <li class="active"><a href="#">test 2</a></li>
     <li><a href="#">My new Tag</a></li>
     <li><a href="#">test 3</a></li>
     <li><a href="#">test 4</a></li>
    <li><a href="#">test 5</a></li>
    <li><a href="#">test 6</a></li>
</ul>

I tried with .appendTo, .insertAfter, .append etc. but could not get the result I wanted. Any idea how this can be achieved?

Answer 1

$('li.active').after('<li><a href="#">My new Tag</a></li>');

Answer 2

Try this:

$('<li><a href="#">content here</a></li>').insertAfter('ul.myList li.active');