Как создать вложенные DIVs с помощью jQuery? - PullRequest
Новая
       24

Как создать вложенные DIVs с помощью jQuery?

3 голосов
/ 24 декабря 2011

У меня есть этот скрипт 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 отдельные директории и не будет вложен.

есть идеи?

спасибо

Ответы [ 3 ]

8 голосов
/ 24 декабря 2011

Использование .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 last приведет к удалению вновь обернутого родительского элемента из иерархии.

2 голосов
/ 24 декабря 2011

Попробуйте: 

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

$(outer).append(inner);
$(outer).appendTo('body');
0 голосов
/ 24 декабря 2011

Вы можете использовать $('<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/

...