如何在clientWidth≤600px时用JS将已有div移入新创建的div

问题说明 #

我需要在浏览器窗口宽度≤600px时，通过JavaScript将已有的.nav-items和.action-btn元素移入新创建的.navgroup容器中，但当前代码未实现预期效果，请求排查修复。

初始DOM结构 #

<div class="navbar">
    <div class="logo">
         <h2>Logo</h2>
     </div>
     <div class="burger">
          <div class="line-1"></div>
          <div class="line-2"></div>
          <div class="line-3"></div>
     </div>
     <div class="nav-items">
          <ul>
             <li><a href="#">Home</a></li>
             <li><a href="#">About</a></li>
             <li><a href="#">FAQS</a></li>
          </ul>
     </div>
     <div class="action-btn">
          <button>hire me</button>
     </div>
</div>

期望调整后的DOM结构 #

<div class="navbar">
    <div class="logo">
         <h2>Logo</h2>
     </div>
     <div class="burger">
          <div class="line-1"></div>
          <div class="line-2"></div>
          <div class="line-3"></div>
     </div>
     <div class="navgroup">
         <div class="nav-items">
             <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">FAQS</a></li>
                  </ul>
         </div>
         <div class="action-btn">
              <button>hire me</button>
         </div>
     </div>
</div>

现有代码 #

let burger = document.querySelector('burger');
let navItems = document.querySelector('nav-items');
let btn = document.querySelector('action-btn');
let navbar = document.querySelector('.navbar');

let navGroup = document.createElement('div')
navGroup.className = 'navgroup';

if (document.documentElement.clientWidth <= 600) {
    navbar.appendChild(navGroup)
    navGroup.appendChild(btn)
    navGroup.appendChild(navItems)
}

问题排查与修复方案 #

核心问题分析 #

1. 选择器语法错误：类选择器必须以.开头，原代码中document.querySelector('burger')这类写法无法获取到对应的DOM元素，导致后续移动操作失效。
2. 未处理窗口 resize 事件：原代码仅在页面加载时执行一次，用户调整窗口大小后不会触发重新布局。
3. 重复创建容器风险：若多次触发宽度判断，会重复创建.navgroup元素，导致DOM结构混乱。

修复后的代码 #

// 修正类选择器，正确获取DOM元素
const burger = document.querySelector('.burger');
const navItems = document.querySelector('.nav-items');
const btn = document.querySelector('.action-btn');
const navbar = document.querySelector('.navbar');

// 防抖函数，避免resize频繁触发
function debounce(func, delay = 200) {
    let timeoutId;
    return () => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(func, delay);
    };
}

// 处理DOM结构调整的核心函数
function adjustNavStructure() {
    const isMobile = document.documentElement.clientWidth <= 600;
    let navGroup = document.querySelector('.navgroup');

    if (isMobile) {
        // 若.navgroup不存在则创建
        if (!navGroup) {
            navGroup = document.createElement('div');
            navGroup.className = 'navgroup';
            // 将navgroup插入到burger元素之后，保持结构顺序
            navbar.insertBefore(navGroup, burger.nextSibling);
        }
        // 仅当元素不在navgroup内时才移动
        if (navItems.parentElement !== navGroup) {
            navGroup.appendChild(navItems);
        }
        if (btn.parentElement !== navGroup) {
            navGroup.appendChild(btn);
        }
    } else {
        // 窗口宽度超过600px时，将元素移回原位置
        if (navGroup) {
            navbar.insertBefore(navItems, burger.nextSibling);
            navbar.insertBefore(btn, navItems.nextSibling);
            // 移除空的navgroup容器
            navGroup.remove();
        }
    }
}

// 页面加载时执行一次
adjustNavStructure();
// 监听窗口resize事件，用防抖优化
window.addEventListener('resize', debounce(adjustNavStructure));

修复说明 #

• 修正了类选择器的语法错误，确保能正确获取目标元素。
• 添加了防抖的resize事件监听，避免窗口调整时频繁触发DOM操作。
• 增加了状态判断：移动端时仅在.navgroup不存在时创建，并确保元素只移动一次；非移动端时将元素还原到初始位置并移除.navgroup。
• 使用insertBefore保证.navgroup插入到.burger之后，与期望结构的顺序一致。

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