如何在JavaScript中克隆表格的.one列？

现有HTML结构 #

<table>
  <tr class="tab">
    <td class="one">3</td>
    <td class="one">4</td>
    <td id="shes">5</td>
    <td class="shee">6</td>
    <td class="five">7</td>
    <td class="six">8</td>
  </tr>
</table>

当前使用的JavaScript代码 #

let elem = document.querySelectorAll('td.one');  
elem.forEach((el) => {  
  el.insertAdjacentHTML('afterend', "<td>clone td.one(number)</td>");           
});

需求说明 #

需要克隆带有.one类的表格列的内容，尝试过cloneNode方法，但不清楚如何在forEach循环中实现。

解决方案 #

直接在forEach循环里对每个选中的.one元素调用cloneNode(true)（参数true表示深度克隆，会复制元素内部的所有内容），再用after()方法把克隆好的元素插入到原元素后方即可：

let elem = document.querySelectorAll('td.one');
elem.forEach(el => {
  // 克隆当前td.one元素，true表示克隆所有子内容
  const clonedEl = el.cloneNode(true);
  // 可选：给克隆元素添加专属类，方便区分原元素
  clonedEl.classList.add('cloned');
  // 将克隆元素插入到原元素的后面
  el.after(clonedEl);
});

如果仅需要克隆内容而非整个元素，可以提取原元素的文本内容，创建新的<td>元素再插入：

let elem = document.querySelectorAll('td.one');
elem.forEach(el => {
  const newTd = document.createElement('td');
  newTd.textContent = el.textContent;
  el.after(newTd);
});

内容的提问来源于stack exchange，提问作者Виталий Юрьевич