jquery - 换行分离 append 按顺序不 append

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 append 分离的“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 :

The .wrap() function can take any string or object that could be passed to the $() factory function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. A copy of this structure will be wrapped around each of the elements in the set of matched elements. This method returns the original set of elements for chaining purposes.