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

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

Answer 2

虽然这已经是很久以前问，它仍然是一个问题（如2015年6月）的jQuery中（v1.11.1）。这里是我的解决办法，这感觉有点..嗯，应该说“特殊”，但工作仍然：

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作为一个工作示例。

Answer 3

奇怪的是，jQuery不够聪明，以保持参考。下面是一个简单的香草JS方式：

orig.parentNode.replaceChild(wrapper,orig); 
wrapper.appendChild(orig);