Javascript 无法将jquery元素附加到新包装的元素

我想在已经存在的div周围包装一个div，然后附加到新创建的父div

// create parent
var $top = $('<div id="top">top</div>');

// wrap it around child
$('#middle').wrap($top);

// append to new parent
$top.append('<div id="bottom">bottom</div>');

//创建父对象
变量$top=$（'top'）；
//把它包在孩子身上
$（“#中间”）.wrap（$top）；
//附加到新父级
$top.append（'bottom'）；

下面是JSFIDLE，它显示了追加不起作用

下面是它的外观：

你知道为什么这么简单的一系列操作不起作用吗？我知道我可以很容易地从父级开始并附加两个子级，但在这种情况下，我需要以这种特殊的方式来完成。

克隆您指定的包装。文件上说（我的重点）：

.wrap（）

函数可以接受任何可能的字符串或对象 传递给

$（）

工厂函数以指定DOM结构。这 结构可以嵌套几层，但只应包含 最里面的一个元素将环绕此结构的副本 匹配元素集中的每个元素。此方法 返回用于链接目的的原始元素集

您必须重新选择

$top

：

$("#top").append('<div id="bottom">bottom</div>');

$（“#顶部”）.append（'bottom'）；

使用

.insertAfter（）

var$top=$（'top'）；
$（“#中间”）.wrap（$top）；
$（'bottom'）。插入后面（'middle'）；

来自（emphasis mine）：“函数

.wrap（）

可以接受可以传递给

$（）

工厂函数的任何字符串或对象，以指定DOM结构。[…]此结构的副本将环绕匹配元素集中的每个元素。此方法返回原始元素集以进行链接。”

var $top = $('<div id="top">top</div>');

$('#middle').wrap($top);

$('<div id="bottom">bottom</div>').insertAfter('#middle');