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>