Using .after() to add html closing and open tags
<p>I'm trying to split an unordered list into two columns by finding the halfway point of the list and adding <code>&lt;/ul&gt;&lt;ul&gt;</code> after that <code>&lt;/li&gt;</code>.  This could be the complete wrong way to do this but it is how I thought to do it.  My js looks like this:</p>

<pre><code>$('.container ul').each(function(){

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

});
</code></pre>

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

<p><code>&lt;ul&gt;</code></p>

<p><code>&lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;</code></p>

<p><code>&lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;</code></p>

<p><code>&lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;</code></p>

<p><code>&lt;ul&gt;&lt;/ul&gt;</code></p>

<p><code>&lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;</code></p>

<p><code>&lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;</code></p>

<p><code>&lt;/ul&gt;</code></p>

<p>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</p>
