Question

I’m trying to do something like this:

<div id="aa">
 <select><option>1</option></select>
 <select><option>a</option></select>
</div>

<div id="bb"></div>

$('#aa').html(appendTo('#bb'));

How can I move the two select menus inside #aa to #bb?

Many thanks.

Answer 1

If you want to move them, and not copy them, do this:

$('#aa').children().appendTo('#bb');

If you do want to copy them, you can do this:

$('#aa').children().clone(true).appendTo('#bb');

Both of these prevent you from needlessly destroying DOM elements, and they retain any event handlers on the elements.

---

EDIT: I was going the wrong direction. I had the children of bb appended to aa. Fixed.