Moving the content of a DIV to another DIV with jQuery

To move contents of a div (id=container2) to another div (id=container1) with jquery.

$('#container2').contents().appendTo('#container1');

It is best not to use html().

I ran into some issues due to html interpreting the contents as a string instead of a DOM node.

Use contents instead and your other scripts should not break due to broken references.

I needed to nest the contents of a DIV into a child of itself, here is how I did it.

example:

<div id="xy">
  <span>contents</span>
</div>

<script>
  contents = $("#xy").contents(); //reference the contents of id xy
  $("#xy").append('<div class="test-class" />'); //create div with class test-class inside id xy 
  $("#xy").find(">.test-class").append(contents); //find direct child of xy with class test-class and move contents to new div
</script>

[EDIT]

The previous example works but here is a cleaner and more efficient example:

<script>
    var content = $("#xy").contents(); //find element
    var wrapper = $('<div style="border: 1px solid #000;"/>'); //create wrapper element
    content.after(wrapper); //insert wrapper after found element
    wrapper.append(content); //move element into wrapper
</script>

See jsfiddle http://jsfiddle.net/Tu7Nc/1/

You must append not your div exactly, but your div's content(inner HTML) with Jquery's html() function.

HTML:

<div id="1">aaa</div>
<div id="2">bbb</div>​

Jquery:

$("#1").append($("#2").html());

Result:

aaabbb
bbb