如何用原生JavaScript根据屏幕宽度双向移动指定DOM元素

需求说明 #

实现窗口尺寸变化时指定DOM元素在两个容器间切换：视口宽度≤1100px时，将类名为move-me的元素移入id="target"的容器；宽度超过阈值时，元素移回id="original"的原容器。目前已实现小宽度下元素移动，但窗口拉大后无法将元素放回原容器，求原生JS解决方案。

现有代码 #

HTML代码 #

<div id="target">
  <!-- move-me goes in here -->
</div>

<div id="original">
  <div class="move-me">
    <p>Stuff</p>
  </div>
  <div class="move-me">
    <p>Stuff</p>
  </div>
  <div class="move-me">
    <p>Stuff</p>
  </div>
</div>

错误JS代码问题分析 #

原有实现存在三个核心问题：

• 仅覆盖了视口≤1100px的分支逻辑，未添加宽度超过阈值时的元素回迁逻辑
• 采用innerHTML复制内容的方式，会丢失原DOM节点绑定的事件、自定义属性，且清空原节点内容后无法复原完整节点
• 未监听窗口resize事件，仅在页面加载时执行一次判断，不会响应窗口尺寸变化

原有错误代码如下：

function moveDetails() {
    let screenWidth = window.innerWidth;
    let target = document.getElementById("target");
    let origin = document.getElementById("original");
    let moveMe = document.querySelectorAll(".move-me");
    if(screenWidth <= 1100) {
        moveMe.forEach(m => {
            target.innerHTML += m.innerHTML;
            m.innerHTML = "";
        });
    } 
}
moveDetails();

已验证解决方案 #

核心逻辑：使用appendChild方法移动完整DOM节点（该方法会自动将节点从原父容器移除，无需手动删除），监听resize事件触发阈值判断，同时兼容页面初始加载状态。代码如下：

function moveDetails() {
    // 声明目标容器、原容器、待移动元素、阈值、视口宽度
    let target = document.getElementById("target"),
            origin = document.getElementById("original"),
            moveMe = document.querySelectorAll(".move-me"),
            breakPoint = 1100,
            viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    // 页面初始化时根据当前视口宽度设置元素位置
    if (viewportWidth < breakPoint) {
        moveMe.forEach(m => {
            target.appendChild(m);
        });
    }
    // 监听resize事件，动态切换元素所属容器
    window.addEventListener('resize', () => {
        let viewportWidth = window.innerWidth || document.documentElement.clientWidth;
        if (viewportWidth < breakPoint) {
            moveMe.forEach(m => {
                target.appendChild(m);
            });
        } else {
            moveMe.forEach(m => {
                origin.appendChild(m);
            });
        }
    });
}
moveDetails();

该方案可精准选中指定类名的元素，无需操作容器全部子元素，适配各类响应式布局场景。

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