Question

如何将div的内容移动到另一个div的内容？

我想将.sidet从.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 Fiddle demo

参考文献：

each()。
insertAfter()。

Answer 4

尝试使用JQuery Draggable（）和Droppable（）函数。参见演示...

Droppable | JQuery UI

将div从一个div内部移动到另一个div

4 个答案: