jQuery's after method not working with newly created elements
<p>Insofar as I can tell, the following code should work, creating a <code>&lt;div&gt;</code> element, and then creating a <code>&lt;p&gt;</code> element; the expression should result in a jQuery object with two elements:</p>

<pre><code>$("&lt;div&gt;first element's content&lt;/div&gt;").after("&lt;p&gt;second element's content&lt;/p&gt;");
</code></pre>

<p>However, what I get is very different. <a href="http://api.jquery.com/after/" rel="nofollow">The documentation</a> (see the heading "Inserting Disconnected DOM Nodes") tells me the above code should result in a jQuery object, grabbing both HTML snippets and building the two DOM elements. But, what I've gotten, in several different versions of jQuery, all above 1.4, is a jQuery object with only 1 node. However, the following code works just fine, returning (what I believe is) the correct jQuery object, two elements inside:</p>

<pre><code>$("&lt;div&gt;&lt;/div&gt;").after("&lt;p&gt;second element's content&lt;/p&gt;");
</code></pre>

<p>And this example works as well:</p>

<pre><code>$("&lt;div&gt;&lt;/div&gt;").after("&lt;p&gt;second element's content&lt;/p&gt;").after("&lt;p&gt;third element's content&lt;/p&gt;");
</code></pre>

<p>It seems the <code>.after()</code> method works fine if the first DOM node being created is empty, but does not when it is not (irrespective of the contents of subsequent DOM nodes being appended to it).</p>

<p>Am I missing something about jQuery's internals, quirky DOM issues and/or JavaScript peculiarities, or is this simply a jQuery bug that's persisted from version 1.4 on through 1.7?</p>

<p>(<a href="http://jsfiddle.net/paulbruno/pT3GQ/" rel="nofollow">Here's a meager JSFiddle</a> demonstrating the issue pretty plainly.)</p>
