Add new element to list using jQuery

Hi,
I'm using jQuery on an app I've been developing. Let's say I have an unorded list like this...

<ul id="animals">
     <li rel="10">Cat</li>
     <li rel="20">Dog</li>
     <li rel="30">Bird</li>
     <li rel="40">Monkey</li>
</ul>

HTML:

Then, lets say I have a variable called 'newPosition' whose value is numeric and comes from somewhere else (it doesn't matter where).

I basically want to put a new element into my #animals list so that it is positioned based on the value of the newPosition variable and that of the 'rel' attributes. So, in the example above, if newPosition = 15 then the new element (an li) should be placed between cat and dog.

I have this loop to loop through each li...

$("#animals").children().each(function() {
     relValue = $(this).attr("rel");
});

Code (markup):

So... when the loop comes around to the right psoition how can I add a new element into the list?

Thanks