使用 insertAfter 在 javascript 循环中移动子 html 元素答案

【问题标题】：Move an child html elements in javascript loop using insertAfter使用 insertAfter 在 javascript 循环中移动子 html 元素
【发布时间】：2022-10-04 23:05:59
【问题描述】：

我有一段重复的 HTML，并想使用 JQuery / Javascript 重新排序子元素：希望在这个简化版本中将描述移动到按钮下方。

sn-p 大致显示了我的逻辑，但不是这样工作的。任何人都能够解决这个问题？

var licount = $(".tile-group").length;
var children = $(".tile-group").children;

for (i = 0; i < children.length; i++) {
    var child = children[i];
    var desc = child.getElementById("desc");

    child.insertAfter( desc );
}

.tile {
 margin: 20px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

【问题讨论】：

标签： javascript html jquery loops insertafter

【解决方案1】：

desc 不是元素的 ID。这是他们的课。你应该做

var desc = child.querySelector(".desc");

【讨论】：