2

为了有效地进行一些 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”？

4

2 回答 2

5

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 结构。这个结构可以嵌套好几层，但应该只包含一个最里面的元素。此结构的副本将环绕匹配元素集中的每个元素。此方法返回用于链接目的的原始元素集。

于 2013-05-30T20:00:47.353 回答
-1

做就是了$holder.detach($wrapper);

编辑：这是工作的小提琴

于 2013-05-30T19:57:41.970 回答