title: Using .after() to add html closing and open tags
body: <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>