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

Question

我想在已经存在的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>');

这是jsfiddle显示附加不起作用....

http://jsfiddle.net/3WRDc/2/

这是它应该是什么样子：

http://jsfiddle.net/3WRDc/1/

为什么这么简单的操作顺序不起作用的任何想法？我明白我可以很容易地从父母那里开始并追加两个孩子，但在这种情况下我需要这样做。

Answer 1

wrap()克隆您指定的包装器。文件说（强调我的）：

  

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

您必须重新选择$top：

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

Answer 2

http://jsfiddle.net/3WRDc/4/

使用.insertAfter()

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

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

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