如何用原生JavaScript将script标签从一个div移至另一个div？

你的原生JS代码存在两个核心问题：

1. 选择器方法误用：document.querySelector(".scripts")仅返回第一个匹配的元素，若存在多个.scripts标签，后续元素无法被获取。需改用document.querySelectorAll(".scripts")来获取所有匹配元素。
2. 动态NodeList遍历问题：querySelectorAll返回的是动态NodeList，当移除元素时，其长度会实时变化，直接用正向for循环会导致部分元素因索引偏移被跳过。

正确的原生JS实现 #

以下是几种可行的解决方案：

方案1：转换为数组后遍历

将NodeList转为静态数组，避免动态变化导致的遍历问题：

const scriptTags = Array.from(document.querySelectorAll(".scripts"));
const container = document.querySelector(".another-container");

scriptTags.forEach(script => {
  container.appendChild(script);
});

方案2：反向遍历NodeList

从最后一个元素开始遍历，规避移除元素后的索引错乱：

const scriptTags = document.querySelectorAll(".scripts");
const container = document.querySelector(".another-container");

for (let i = scriptTags.length - 1; i >= 0; i--) {
  container.appendChild(scriptTags[i]);
}

补充说明

• 直接调用appendChild时，浏览器会自动将元素从原父节点移除，无需额外执行removeChild，行为与jQuery的appendTo完全一致。
• 若需兼容ES6之前的旧浏览器，可使用[].slice.call(document.querySelectorAll(".scripts"))替代Array.from()来转换NodeList为数组。

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