HTML：尝试从外部div获取内部div并将div放在外部div之外

Question

我试图从外部div获取内部div并将内部div放在外部div之外。

<div class="vc_gitem-zone-mini">
<div class="vc_gitem_row.............."></div>
<div>

我想得到：

<div class="vc_gitem-zone-mini">
<div>

<div class="vc_gitem_row.............."></div>

是否有可能通过css或jquery来做到这一点..？

Answer 1

您可以使用.after()来实现此目的，您无需将流程拆分为删除/添加，它将在一个步骤中执行此操作，如下所示：

$('button').click(function(){
  $('.vc_gitem-zone-mini').after($('.vc_gitem_row'));
});

.vc_gitem-zone-mini{
  background: green;
  width: 200px;
  height: 200px
}

.vc_gitem_row{
  background: red;
  width: 100px;
  height: 100px

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vc_gitem-zone-mini">
<div class="vc_gitem_row"></div>
</div>

<button>LEAVE!</button>

Answer 2

使用div选择$('div')，然后使用.after() 在元素之后将其替换为

// Get div you want to move
var inner = $(".inner");

// replace div
$(".outer").after(inner);

// DOM after above code has been executed
//
// <div class="outer"></div>
// <div class="inner">inner div</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">inner div</div>
</div>