包裹分离附加顺序不附加

Question

为了有效地进行一些DOM操作,我正在分离一个元素.在这个过程中,我遇到了这个有趣的情况:

__CODE__

var $holder = $("#d");
var $wrapper = $("<div>").css("border","1px solid red");
$holder.wrap($wrapper);
$holder.detach();
$wrapper.append($holder);

因此,带有字母"a"的div由带有红色边框的div包裹.然后将带有字母"a"的div分离.然后包装div附加分离的"a".但是,字母"a"从未重新出现.

我错过了什么？我做错了什么？我怎样才能得到"a"回来？

Answer 1

wrap() 动态创建HTML结构并将其插入DOM,这就是为什么:

$(element).wrap('<div><span></span></div>')

因为变量$ wrapper与实际创建和插入wrap()的元素不同,所以你再次从DOM获取元素:

var $holder = $("#d");
var $wrapper = $('<div />', {style:'border:1px solid red;', id:'wrapper'});
$holder.wrap($wrapper);
$holder.detach();
$('#wrapper').append($holder);

小提琴

从文件:

.wrap()函数可以接受任何可以传递给$()工厂函数的字符串或对象来指定DOM结构.这个结构可以嵌套几层深,但应该只包含一个inmost元素.此结构的副本将围绕匹配元素集中的每个元素进行包装.此方法返回用于链接目的的原始元素集.