如何用JavaScript/jQuery循环移动HTML子元素至按钮下方？代码求修复

原代码存在的问题 #

1. jQuery的children是方法，必须调用children()才能获取子元素集合，原代码$(".tile-group").children拿到的是函数而非实际元素列表
2. insertAfter方法逻辑搞反：该方法是将调用者元素插入到参数元素的后方，原代码写法是把tile元素插到desc后面，完全不符合需求
3. 循环变量i未声明，会造成全局变量污染

修复后的代码 #

方案1：jQuery实现（更简洁）

$(".tile").each(function() {
  // 找到当前tile内的.desc，插入到同tile内的.btn之后
  $(this).find(".desc").insertAfter($(this).find(".btn"));
});

方案2：原生JavaScript实现

// 获取所有tile元素
const tiles = document.querySelectorAll(".tile-group .tile");
// 遍历每个tile
tiles.forEach(tile => {
  const descElem = tile.querySelector(".desc");
  const btnElem = tile.querySelector(".btn");
  // 将desc插入到btn的后方
  btnElem.insertAdjacentElement("afterend", descElem);
});

完整可运行代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.tile {
 margin: 20px;
}
</style>
<div class="tile-group">
<div class="tile">
   <div class="title">
      Title 1
   </div>
   <div class="desc">
      Description 1
   </div>
   <div class="btn">
    <button>Button 1</button>
   </div>
</div>
<div class="tile">
   <div class="title">
      Title 2
   </div>
   <div class="desc">
      Description 2
   </div>
   <div class="btn">
    <button>Button 2</button>
   </div>
</div>
</div>
<script>
// 使用jQuery方案的话，直接复制这段代码
$(".tile").each(function() {
  $(this).find(".desc").insertAfter($(this).find(".btn"));
});
</script>

内容的提问来源于stack exchange，提问作者Naomi S