How come it's like this?
<p>　　<a href="http://jsfiddle.net/DerekL/whY4B/" rel="nofollow"><strong><em><code>http://jsfiddle.net/DerekL/whY4B/</code></em></strong></a></p>

<pre><code>$("p").each(function(i) {
    var btn = $('&lt;button&gt;button&lt;/button&gt;'),
        span = $('&lt;span&gt;span&lt;/span&gt;');
    $(this).after(btn).after(span);
});​
</code></pre>

<p>So here I have <code>&lt;p&gt;</code>s in my HTML and I use <code>.after()</code> to create buttons and spans:</p>

<pre><code>$(this).after(btn).after(span);
</code></pre>

<p><code>btn</code> comes first, and <code>span</code> comes last. But the result is the opposite: <code>btn</code> comes last, and <code>span</code> comes first.</p>

<p>What the heck? How come it's like that and it is very confusing. Please help.</p>
