Question

I’m trying to add a list item (Your Information) between two other list items (FirstName and Email), but have been unsuccessful because the two list items contain siblings. Thanks for your help!

<script type="text/javascript">
$(document).ready(function(){
$('<li>Your Information</li>').insertAfter('#FirstName');

});
</script>

<form class="lpeRegForm"><ul class='mktLblLeft'>
<li  class='Field' >
<label>First Name:</label>
<span class='Input'>
<input class='FormText' name="FirstName" id="FirstName" type='text' value=""    maxlength='255' tabIndex='1' />
<span class='FormMsg'></span>
</span>
</li>
<li  class='Field' >
<label>Email Address:</label>
<span class='Input'>
<input class='FormText' name="Email" id="Email" type='text' value=""  maxlength='255' tabIndex='2' />
<span class='FormMsg'></span>
</span>
</li>  
</ul>
</form>

Answer 1

You need to insert it after the li that #FirstName is inside of. E.g.,

$('<li>Your Information</li>').insertAfter($('#FirstName').closest('li'));

---

Edit: this alternative syntax is arguably cleaner:

$('#FirstName').closest('li').after('<li>Your Information</li>');