Using .after() to add html closing and open tags

Question

I'm trying to split an unordered list into two columns by finding the halfway point of the list and adding </ul><ul> after that </li>. This could be the complete wrong way to do this but it is how I thought to do it. My js looks like this:

$('.container ul').each(function(){

    var total = $(this).children().length;
    var half = Math.ceil(total / 2) - 1;
    $(this).children(':eq('+half+')').after('</ul><ul>');

});

The problem I'm having and what I don't understand is that .after() is reversing the order of the tags and outputs:

<ul>

<li><a href="#">link</a></li>

<li><a href="#">link</a></li>

<li><a href="#">link</a></li>

<ul></ul>

<li><a href="#">link</a></li>

<li><a href="#">link</a></li>

</ul>

Please let me know if there's a better way to do this, but I really would like to know why .after() is reversing the order of tags. Thanks