如何使用jQuery创建嵌套的DIV？

Question

我有这个jquery脚本:

$('#add').click(function(){
    $('<div class="drag" style="left:20px;"/>')
        .text( num++ )
        .appendTo( document.body )
        .css({ 
            top: $( window ).height() - 500 , 
            left:$( window ).width() - 500
        });
});

这将创建: <div class="drag" style="left:20px;"/></div>

我有兴趣创建的是:

<div class="drag" style="left:20px;"/>
    <div class="handle SE">
    </div>
</div>

如果我这样做:

...
$('<div class="drag" style="left:20px;"/><div class="handle SE">')
.text( num++ )
...

jquery将创建2个单独的di'vs而不是嵌套.

有任何想法吗？

谢谢

Answer 1

用途.wrap():

$('<div class="handle SE">')
  .text(num++)
  .appendTo(document.body)
  .wrap('<div class="drag" style="left:20px;"/>);

http://jsfiddle.net/alnitak/r4Dz6/上的工作示例

在这个特定的例子中,.appendTo(document.body) 在完成换行之前调用是必要的,因为.wrap()返回原始元素.调用.appendTolast会导致新包装的父元素从层次结构中删除.