[jQuery] How to add a new item after selected item?
How do I add a new LI to a UL. When the user clicks on the label I
want to add a new LI as a sibling to the LI that has the class sel. I
know I can easily add it as a child of parent UL but how do I make it
appear in between the selected LI and the next LI ?
<script>
function AddLI()
{
$('.sel').parent.append($('<li>New One Added here</li>');
}
</script>
<label onclick"AddLI()">click to add a new item</label>
<ul>
<li>Here is an Item</li>
<li>Here is an Item</li>
<li>
<ul>
<li>Here is an Item 1</li>
<li class="sel">This one is selected</li>
<li>Here is an Item 3</li>
</ul>
</li>
</ul>
Desired Result.
<ul>
<li>Here is an Item</li>
<li>Here is an Item</li>
<li>
<ul>
<li>Here is an Item 1</li>
<li class="sel">This one is selected</li>
<li>New One Added here</li>
<li>Here is an Item 3</li>
</ul>
</li>
</ul>