Question

The jQuery wrap() method does not wrap using element you created, but a duplicate:

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

If you are not convinced, you can see a live version of the above here: http://jsfiddle.net/QRmY6/

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

Answer 1

The best alternatives I have come up with are:

// Technique 1 - swap it out and then embed it via append
var $wrap = $('<div>').css({border:'1px solid red'});
$orig.replaceWith($wrap);
$wrap.append($orig);

// Technique 2 - create it inline and then modify it
var $wrap = $orig.wrap('<div>').parent().css({border:'1px solid red'});