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>

Reply via email to