Moving a div from inside one div to another div

Question

How do I move the contents of a div to the contents of another div?

I want to move .sidebar from .post to .carousel. How to do it by using javascript?

I want to go from this:

<div class="container">
  <div class="carousel">
    <div class="row">
      <div class="post">
    <div class="sidebar"></div>
      </div>
</div>
  </div>
</div>

to this:

<div class="container">
  <div class="carousel">
    <div class="row">
      <div class="post"></div>
      <div class="sidebar"></div>
    </div>
  </div>
</div>

Answer 1

document.getElementsByClassName('row')[0].appendChild(document.getElementsByClassName('sidebar')[0]);

Answer 2

Assuming you only have only one such occurrence, you can use plain JavaScript:

var sidebar = document.getElementsByClassName('sidebar')[0];

// move after parent node
sidebar.parentNode.parentNode.appendChild(sidebar);

The appendChild() function moves rather than copies existing elements from their previous location in the tree. To perform a copy you would need to clone the respective elements first.

Answer 3

I'd suggest, on the off-chance you've more than one element with that class (and assuming that in all instances they should be inserted after their parentNode ):

$('.sidebar').each(function(){
    $(this).insertAfter(this.parentNode);
});

JS Fiddle demo .

References:

• each() .
• insertAfter() .

Answer 4

Try to use JQuery Draggable() and Droppable() functions. See the Demo...

Droppable | JQuery UI