將div從一個div內部移動到另一個div

Question

如何將div的內容移動到另一個div的內容？

我想將.sidebar從.post移到.carousel。 如何使用javascript做到這一點？

我想從這里開始：

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

對此：

<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

假設只有這種情況發生，那么可以使用普通的JavaScript：

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

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

appendChild()函數移動而不是從樹中的先前位置復制現有元素。 要執行復制，您需要首先克隆相應的元素。

Answer 3

我建議，在可能的情況下，該類具有多個元素（並假設在所有情況下都應將其插入其parentNode ）：

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

JS小提琴演示 。

參考文獻：

• each() 。
• insertAfter() 。

Answer 4

嘗試使用JQuery Draggable（）和Droppable（）函數。 觀看演示...

可滴| jQuery UI