Question

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="d">a</div>

其中带有字母“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);

FIDDLE

来自documentation：

.wrap（）函数可以接受任何可能的字符串或对象传递给$（）工厂函数以指定DOM结构。这个结构可以嵌套几层深，但应该只包含一个最重要的元素。 此结构的副本将被包裹匹配元素集中的每个元素。这种方法为链接目的返回原始元素集。

Answer 2

只需$holder.detach($wrapper);

编辑：这是工作Fiddle

包裹分离附加顺序不附加

2 个答案: