javascript - 用另一个元素包装一个元素，保留对包装器的引用？

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