Wrap one element with another, retaining reference to wrapper?
<p>The jQuery <code>wrap()</code> method does not wrap using element you created, but a duplicate:</p>

<pre><code>var $orig = $('p'); // some existing element
var $wrap = $('&lt;div&gt;').css({border:'1px solid red'});
$orig.wrap($wrap);
$wrap.append('&lt;p&gt;SMOKE YOU&lt;/p&gt;'); // does not appear after the original element
</code></pre>

<p>If you are not convinced, you can see a live version of the above here: <a href="http://jsfiddle.net/QRmY6/" rel="nofollow">http://jsfiddle.net/QRmY6/</a></p>

<p>How do I best create non-trivial dynamic content to wrap around an existing node <em>while retaining a reference to the wrapper that ends up around the content</em>?</p>
