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/
我如何最好地创建重要的动态内容以包装现有节点同时保留对最终围绕内容的包装器的引用？
【问题讨论】：
标签： javascript jquery
我想出的最佳选择是：
// 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'});
【讨论】：
$ 想让我呕吐。这不是 PHP。
$ 作为迷你匈牙利符号提示变量包含 jQuery 对象而不是 DOM 对象。
虽然很久以前就有人问过这个问题，但它仍然是 jQuery (v1.11.1) 中的一个问题（截至 2015 年 6 月）。这是我的解决方法，感觉有点......好吧，我们应该说“特别”，但仍然有效：
var $orig = $('p'); // some existing element
var $wrap = $('<div>').css({border:'1px solid red'});
$wrap = $orig.wrap($wrap).parent(); //the object that is being wrapped is returned, so selecting its parent will get the wrapper. Re-setting that in the $wrap variable will retain the wrapper for reference
$wrap.append('<p>SMOKE YOU</p>'); // this will now work
注意：需要注意的是 $wrap 元素不再可用于包装，因为它现在包含 $orig 元素。解决方法是以另一种“特殊”方式使用add()：
var $orig = $('p'); // some existing element
var $wrap = $('<div id="wrapper">').css({border:'1px solid red'});
$wrap = $wrap.add($orig.wrap($wrap.clone().empty()).parent()); //the object that is being wrapped is returned, so calling for its parent will return the wrapper.
$wrap.append('<p>SMOKE YOU</p>'); // this will now work
$wrap = $wrap.add( $('div.otherdiv').wrap($wrap.clone().empty()).parent())
console.log($wrap); //as you can see the $wrap variable now contains two divs
$wrap.css({'border' : '1px solid blue'}); //this will now work on all wraps
这不是很清楚的代码，但它的工作原理！有关工作示例，请参阅 this Fiddle。
【讨论】：
惊讶于 jQuery 不够聪明，无法保留引用。这是一个简单的香草JS方式：
orig.parentNode.replaceChild(wrapper,orig);
wrapper.appendChild(orig);
【讨论】：