JQuery : Inserting into newly created elements
<p>I have this code (running jQuery 1.4.2)</p>

<pre><code>var elementToAdd = $('&lt;h3&gt;').html('header');
var p = $('&lt;p&gt;').html('hello world');
elementToAdd.after(p);
$('div#content').append(elementToAdd);
</code></pre>

<p>However, the output is</p>

<pre><code>&lt;div id="content"&gt;
  &lt;h3&gt;header&lt;/h3&gt;
&lt;/div&gt;
</code></pre>

<p>The paragraph "Hello world" is not added. </p>

<p>What am I doing wrong?</p>

<hr>

<p>I have been trying out some variations:</p>

<p>This does not work either:</p>

<pre><code>var elementToAdd = $('&lt;div&gt;Header&lt;/div&gt;');
var p = $('&lt;p&gt;hello world&lt;/p&gt;');
elementToAdd.after(p);
</code></pre>

<p>or this:</p>

<pre><code>var elementToAdd = $('&lt;h3&gt;header&lt;/h3&gt;').after('&lt;p&gt;hello world&lt;/p&gt;');
</code></pre>

<p>But this works (on Firefox, at least):</p>

<pre><code>var elementToAdd = $('&lt;div&gt;').after('&lt;h3&gt;header&lt;/h3&gt;').after('&lt;p&gt;hello world&lt;/p&gt;');
</code></pre>

<p>Why?</p>
