用另一个元素包裹一个元素,保留对包装的引用？

Question

jQuery wrap()方法不使用您创建的元素进行换行,而是复制:

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

如果你不相信,你可以在这里看到上面的实时版本:http://jsfiddle.net/QRmY6/

如何最好地创建非平凡的动态内容来包装现有节点,同时保留对内容周围的包装器的引用？

Answer 1

我想出的最佳替代方案是：

// 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'});