我想在已经存在的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/你知道为什么这么简单的操作序列不起作用吗?我知道我可以很容易地从父元素开始,然后附加两个子元素,但在这个例子中,我需要用这种特殊的方式。
wrap()克隆您指定的包装器。文档说(强调我的):
.wrap()
函数可以接受任何字符串或对象传递给$()
工厂函数以指定DOM结构。这结构可以嵌套几个层次,但应该只包含一个最里面的元素。该结构体的副本将被包裹匹配元素集合中的每个元素。这个方法返回用于链接的原始元素集。
您必须重新选择$top
:
$("#top").append('<div id="bottom">bottom</div>');
http://jsfiddle.net/3WRDc/4/
使用.insertAfter()
var $top = $('<div id="top">top</div>');
$('#middle').wrap($top);
$('<div id="bottom">bottom</div>').insertAfter('#middle');