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'v而不是嵌套。

任何想法？

感谢

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()返回原始元素。最后调用.appendTo会导致新包装的父元素从层次结构中删除。

Answer 2

尝试：

var outer = $('<div class="drag">').text('foo');
var inner = $('<div class="handle SE">').text('bar');

$(outer).append(inner);
$(outer).appendTo('body');

Answer 3

您可以使用$('<div class="drag"><div class="handle"></div></div>')

演示：http://jsfiddle.net/VaKAw/

修改：您已将/放在第一个div的末尾：

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

这使得它们没有嵌套，没有按预期工作：http://jsfiddle.net/nbT8m/

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

3 个答案: