在 HTML 中你可能需要使用 js动态移动节点的方法，把 HTML DOM 节点移动到其他的位置。

本文将介绍使用原生 js移动节点的方法，实现 js节点移动。

移动节点js使用的HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>原生 js移动节点的方法</title>
  </head>
  <body>
    <div id="moveFrom">
       <div id="needMove" class="need-move">
         需要移动的节点
       </div>
    </div>
    <div id="moveTo"></div>
  </body>
</html>

js获取节点

1、使用 getElementById() 以 id 获取 HTML 节点：

const needMoveElement = document.getElementById("needMove");

2、以任意元素选择器获取 HTML 节点，获取的是第一个匹配到的节点：

const needMoveElement = document.querySelector(".needMove");

js移动节点

js移动节点只需把获取的节点，添加到其他的节点内，就完成了移动，这样的操作不是复制元素，而是移动元素。

var moveToElement = document.getElementById("moveTo");
moveToElement.appendChild(needMoveElement);

js移动节点的完成代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>原生 js移动节点的方法</title>
  </head>
  <body>
    <div id="moveFrom">
       <div id="needMove" class="need-move">
         需要移动的节点
       </div>
    </div>
    <div id="moveTo"></div>
    <script>
      const needMoveElement = document.getElementById("needMove");
      var moveToElement = document.getElementById("moveTo");
      moveToElement.appendChild(needMoveElement);
    </script>
  </body>
</html>

结语

本文介绍使用原生 js移动节点的方法，实现 js节点移动，基本方法是获取需要移动的元素，把它添加到其他元素中，即实现了移动节点。