jQuery appendTo方法未正确添加元素到父元素末尾问题

你尝试将元素的副本追加到父元素底部，但新元素都被添加到父元素内最后一个元素的上方，问题出在克隆后的元素操作逻辑上。

原代码 #

JavaScript

var count = 1;

$("#addBtn").click(function(){
  $('#trid1').clone().appendTo('table#exampleTable > tbody');
  count++;
  $('#trid1').last().prop('id', 'trid'+count);
  $('#trid'+count+' > th').html(count);
});

HTML

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table" id="exampleTable">
  <thead>
    <tr>
      <th scope="col">c1</th>
    </tr>
  </thead>
  <tbody>
    <tr id="trid1" class="trclass">
      <th scope="row">1</th>
    </tr>
  </tbody>
</table>
<button type="button" id="addBtn">Add</button>

问题分析 #

每次克隆的都是固定ID为trid1的元素，克隆后的新元素ID仍为trid1，后续通过$('#trid1').last()选择新元素的方式容易产生混淆，且操作顺序不合理（先追加再修改），虽然appendTo本身是将元素添加到容器末尾，但修改逻辑的绕弯容易导致误解。

修复后的代码 #

JavaScript

var count = 1;

$("#addBtn").click(function(){
  // 克隆元素并保存引用
  var newRow = $('#trid1').clone();
  count++;
  // 直接修改新元素的ID和内容
  newRow.prop('id', 'trid' + count).find('th').html(count);
  // 将修改后的新元素追加到tbody底部
  newRow.appendTo('table#exampleTable > tbody');
});

说明 #

• 先克隆元素并保存其引用，直接对这个新元素进行ID和内容的修改，避免了选择器匹配多个元素的问题
• 修改完成后再将新元素追加到tbody末尾，确保新元素出现在所有现有元素的下方，符合预期需求

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