Moving DIV contents to another DIV using jQuery

Question

http://www.frostjedi.com/terra/scripts/demo/jquery02.html

According to this link, elements can be moved by making $ ('# container1'). append ($ ('# container2')). Unfortunately, this does not seem to work for me. Any ideas?

Answer 1

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

You should not add your div exactly, but your content div (internal HTML) using the jQuery html() function.

HTML:

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

Jquery:

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

Result:

 aaabbb bbb 

Answer 2

Better not to use html() .

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

Use the content instead, and other scripts should not be interrupted due to broken links.

I needed to embed the contents of the DIV in myself, that’s 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's 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> 

Answer 3

Move contents of div (id = container2) to another div (id = container1) using jquery.

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

Answer 4

You can also do:

 var el1 = document.getElementById('container1'); var el2 = document.getElementById('container2'); if (el1 && el2) el1.appendChild(el2); 

or as one statement, but not so much:

 document.getElementById('container1').appendChild(document.getElementById('container2')); 

Edit

On reflection (a few years later ...) it seems that the goal is to move the contents of one div to another. So the following is in plain JS:

 var el1 = document.getElementById('container1'); var el2 = document.getElementById('container2'); if (el1 && el2) { while (el2.firstChild) el1.appendChild(el2.firstChild); } // Remove el2 if required el2.parentNode.removeChild(el2); 

This allows you to keep any dynamically added listeners on descendants of el2 so that solutions using innerHTML will be removed.

Answer 5

$('#container1').append($('#container2').html())

Answer 6

Well, this could be an alternative if you want to add:

 document.getElementById("div2").innerHTML=document.getElementById("div2").innerHTML+document.getElementById("div1").innerHTML 

if you want to rewrite the contents:

 document.getElementById("div2").innerHTML=document.getElementById("div1").innerHTML 

Answer 7

I suggest a general approach with function and jQuery:

 function MoveContent(destId, srcId) { $('#' + destId).append($('#' + srcId).contents().detach()); } 

The contents of the selected node source are added to the destination node with a call:

 MoveContent('dest','src'); 

The first parameter is the identifier of the new parent node (destination), the second is the identifier of the old parent node (source).

See an example: http://jsfiddle.net/dukrjzne/3/