寻找jQuery中appendTo()方法的原生JavaScript等效实现（移动已有DOM元素）

当然有对应的原生方案啦！jQuery的.appendTo()方法在处理已存在DOM元素时，本质是把元素从原位置移除并添加到目标容器的末尾——这个逻辑用原生JavaScript可以轻松实现，而且有两种常用方法：

方法1：使用appendChild()（兼容性最好） #

这是最经典的原生DOM操作方法，和jQuery的.appendTo()行为完全一致：如果目标元素已经在DOM中，它会被移动而非复制。示例代码如下：

// 获取要移动的元素和目标容器
const buttonEl = document.querySelector('.button');
const containerEl = document.querySelector('.container');

// 执行移动操作
containerEl.appendChild(buttonEl);

执行后，你的DOM结构会从：

<div class="button"></div>
<div class="container"></div>

变成：

<div class="container">
  <div class="button"></div>
</div>

方法2：使用append()（ES6+ 更灵活） #

这是ES6新增的API，用法更简洁，还支持同时添加多个元素/文本节点，对于单个元素的移动场景，效果和appendChild()完全相同：

const buttonEl = document.querySelector('.button');
const containerEl = document.querySelector('.container');

containerEl.append(buttonEl);

处理多个匹配元素的情况 #

如果页面中有多个.button元素（和jQuery批量操作的逻辑对齐），可以用querySelectorAll()获取所有匹配元素，再遍历执行移动：

const buttonEls = document.querySelectorAll('.button');
const containerEl = document.querySelector('.container');

buttonEls.forEach(button => {
  containerEl.appendChild(button);
});

这样所有.button元素都会被依次移动到.container的末尾，和$('.button').appendTo('.container')的效果完全一致。

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