如何用JavaScript的append()替代jQuery的append()实现表格追加

嘿，我懂你想跳过jQuery，用纯原生JS完成把表格2的内容插入到表格1末尾的需求～先把你给出的代码补全，再给你完整的实现方案：

首先是HTML结构，我们需要两个表格和两个触发按钮：

<table id="lst1" border="1">
  <tbody>
    <tr><td>表格1行1</td></tr>
    <tr><td>表格1行2</td></tr>
  </tbody>
</table>

<table id="lst2" border="1">
  <tbody>
    <tr><td>表格2行1</td></tr>
    <tr><td>表格2行2</td></tr>
  </tbody>
</table>

<button id="jQuery">用jQuery执行</button>
<button id="jScript">用原生JS执行</button>

接下来是完整的JS代码，包含你写的jQuery版本和补全的原生JS版本：

// jQuery版本（你已实现的部分）
$(document).ready(function (){
  $("#jQuery").on("click", function () {
    $("#lst1").find("tbody").append( $("#lst2").find("tbody").html() );
  });

  // 原生JavaScript版本
  document.getElementById("jScript").addEventListener("click", function() {
    // 获取两个表格的tbody元素
    const table1Body = document.querySelector("#lst1 tbody");
    const table2Body = document.querySelector("#lst2 tbody");
    
    // 把表格2tbody里的内容追加到表格1tbody末尾
    // 方式1：直接追加HTML内容（和jQuery逻辑一致，复制内容）
    table1Body.innerHTML += table2Body.innerHTML;
    
    // 方式2：如果想移动而非复制节点（原表格2内容会被移除），可以用下面的代码
    // while(table2Body.firstChild) {
    //   table1Body.appendChild(table2Body.firstChild);
    // }
  });
});

原生JS实现的关键点： #

• 用document.querySelector或者getElementById获取DOM元素，替代jQuery的选择器语法
• 用addEventListener绑定点击事件，替代jQuery的.on()方法
• 如果只是复制表格2的内容，直接操作innerHTML就能和jQuery的.append(html)效果一致；如果是要把表格2的节点直接移动过去（原表格2会清空），就用appendChild循环转移子节点

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