Why is jquery clone cloning the parent but not its children?

Question

I´ve a parent div withs its child like this:

<div id="padre" class="demo">
 <ul id="sortable1" class="droptrue ui-sortable">
  <li id="app1" class="ui-state-default toolTip">
   <div id="00" class="AppPadre"></div>

So when I clone my parent div with then next line:

var $copia = $('#padre>*').clone();

and I print my cloned variable it only shows:

<div id="padre" class="demo">
 <ul id="sortable1" class="droptrue ui-sortable">

Does anyone has any idea why is it only copying the 1st 2 levels?? Thanks in advance. Just after the copy I´m removing all subelements of "padre" with $('#padre>*').remove(); and it does remove all the subelements but when i do the append it only appends the 1st subelement of "padre".

Answer 1

You didn't close the tags correctly:

<div id="padre" class="demo">

     <ul id="sortable1" class="droptrue ui-sortable">
        <li id="app1" class="ui-state-default toolTip"><li>
     </ul>

    <div id="00" class="AppPadre"></div>

</div>

http://jsfiddle.net/E8uJm/

---

edit: Try the following:

$('#padre').children().clone();
$("#clone").append($copia);
$('#padre').remove();

http://jsfiddle.net/E8uJm/2/

Answer 2

Try this:

var $copia = $('#padre>*').clone(true, true);