jQuery.after() does not work as expected
<p>Please have a look at: <a href="http://jsfiddle.net/s6VdW/" rel="nofollow">http://jsfiddle.net/s6VdW/</a></p>

<p>HTML:</p>

<pre><code>&lt;div id="test"&gt;&lt;/div&gt;
</code></pre>

<p>JS:</p>

<pre><code>var span1 = $("&lt;span/&gt;").text("Hello");
var br = $("&lt;br/&gt;");
var span2 = $("&lt;span/&gt;").text("World!");
span1.after(br).after(span2);

$("#test").append(span1);
</code></pre>

<p>Expected result is:</p>

<pre><code>Hello
World
</code></pre>

<p>Expected Result as HTML is:</p>

<pre><code>&lt;div&gt;
    &lt;span&gt;Hello&lt;/span&gt;
    &lt;br/&gt;
    &lt;span&gt;World&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>What is the error? According to the jQuery Docs (<a href="http://api.jquery.com/after/" rel="nofollow">http://api.jquery.com/after/</a>) it should be possible:</p>

<blockquote>
  <p><code>.after()</code> will also work on disconnected DOM nodes.</p>
</blockquote>

<p>and</p>

<blockquote>
  <p>That set can be further manipulated, even before it is inserted in the document.</p>
</blockquote>

<p><strong>UPDATE</strong></p>

<p>It seems, that I need to append the first span to the DOM first, before using <code>.after()</code>. But what is the alternative? If I can't access the DOM, e.g. because I'm in a DOM-unaware part of the code? <a href="http://jsfiddle.net/s6VdW/10/" rel="nofollow">http://jsfiddle.net/s6VdW/10/</a></p>

<p><strong>UPDATE 2</strong></p>

<p>I can create a "temporary" div, to which I append the elements to. Then I return the children of that div. Demo: <a href="http://jsfiddle.net/s6VdW/13/" rel="nofollow">http://jsfiddle.net/s6VdW/13/</a> - Does that look like the way to go?</p>
