将jQuery的remove()与appendTo()转换为原生JavaScript的技术问询

原jQuery代码的作用是：将.element-1元素从当前DOM位置移除，然后追加到.element-2元素内部的末尾。原生JavaScript可以直接用DOM API实现相同逻辑，甚至能简化操作。

单个元素的场景 #

如果只需要处理匹配到的第一个.element-1元素：

const element1 = document.querySelector('.element-1');
const element2 = document.querySelector('.element-2');

// 确保元素存在再操作
if (element1 && element2) {
  // 原生append方法会自动将元素从原位置移除，再追加到目标元素末尾
  element2.append(element1);
}

对应方法说明 #

• document.querySelector(selector)：和jQuery的$(selector)作用类似，返回匹配选择器的第一个DOM元素；
• Element.append()：对应jQuery的appendTo()，可以接收DOM元素作为参数。如果传入的元素已经存在于DOM中，它会自动把元素从原位置移除，再添加到目标元素的子元素末尾——这就同时实现了jQuery中remove()+appendTo()的效果。

要是想和原jQuery代码逻辑完全对齐，显式写出移除步骤，也可以这么写：

const element1 = document.querySelector('.element-1');
const element2 = document.querySelector('.element-2');

if (element1 && element2) {
  element1.remove(); // 显式从DOM中移除元素，保留引用
  element2.append(element1); // 将移除的元素追加到目标位置
}

多个元素的场景 #

如果页面中有多个.element-1元素需要处理：

const elements1 = document.querySelectorAll('.element-1');
const element2 = document.querySelector('.element-2');

if (element2) {
  // 转成数组并倒序循环，避免DOM元素移除后导致的索引错乱
  Array.from(elements1).reverse().forEach(el => {
    element2.append(el);
  });
}

注意点 #

document.querySelectorAll()返回的是NodeList，需要转成数组后才能使用forEach；倒序循环是因为如果正序处理，前面的元素被移除后，后面的元素在NodeList中的索引会发生变化，导致部分元素被跳过。

内容的提问来源于stack exchange，提问作者Mathieu Préaud