JavaScript：移动由子元素唯一标识的父级div

核心解决代码 #

直接利用jQuery的insertAfter()方法即可完成跨容器移动，核心是通过子元素的唯一ID定位对应父元素，再插入到目标位置：

// 定位child3的父容器
const $parentOfChild3 = $('#child3').parent();
// 将该父容器插入到child2的父容器之后
$parentOfChild3.insertAfter($('#child2').parent());

为什么之前的方法没生效？ #

你之前尝试的prependTo()/appendTo()是把元素插入到目标元素的内部（作为子元素），但我们需要的是将元素放到目标元素的同级后方，insertAfter()恰好匹配这个需求——它会自动把元素从原容器移除，插入到指定元素的同级位置之后，完美适配跨容器移动场景。

初始DOM结构 #

<div class="container1">
  <div class="generic">
    <div id="child1"></div>
  </div>
  <div class="generic">
    <div id="child2"></div>
  </div>
  <div class="generic">
    <div id="child4"></div>
  </div>
</div>
<div class="container2">
  <div class="generic">
    <div id="child3"></div>
  </div>
</div>

执行后得到的期望结构 #

<div class="container1">
  <div class="generic">
    <div id="child1"></div>
  </div>
  <div class="generic">
    <div id="child2"></div>
  </div>
  <div class="generic">
    <div id="child3"></div>
  </div>
  <div class="generic">
    <div id="child4"></div>
  </div>
</div>
<div class="container2">
</div>

内容的提问来源于stack exchange，提问作者Darren He