Как вставить новый тег li в указанном месте?

Я хотел вставить тег li в середине списка тегов li на основе класса css, установленного в тег li, используя jQuery. Рассмотрим следующее

<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>

Я хотел вставить новый тег li после того, как тег li установлен в активный. Таким образом, выход будет таким.

<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>

Я попытался использовать .appendTo,.insertAfter,.append и т.д., но не смог получить результат, который я хотел. Любая идея, как это можно достичь?

Ответ 1

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

Ответ 2

Попробуйте следующее:

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