本教程详细讲解如何使用javascript动态地将现有dom元素（如导航项和操作按钮）移动到一个新创建的容器中，以适应不同的屏幕尺寸，实现响应式布局。文章涵盖了元素选择、创建、插入及移动的核心dom操作技巧，并提供了完整的示例代码，旨在帮助开发者优化页面结构和用户体验。
引言
在现代Web开发中，响应式设计是不可或缺的一部分。有时，为了在不同屏幕尺寸下优化布局和用户体验，我们需要动态地调整DOM结构。一个常见的场景是，在小屏幕设备上，将多个导航相关元素（如导航链接和动作按钮）组合到一个新的容器中，以便于管理或配合汉堡菜单的显示。本教程将指导您如何使用纯JavaScript实现这一动态重组过程。
初始HTML结构与目标
假设我们有一个导航栏，其初始HTML结构如下：
<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>我们的目标是，当浏览器视口宽度小于等于600像素时，将.nav-items和.action-btn这两个元素移动到一个新创建的.navgroup容器中，并将.navgroup插入到.burger元素之后，形成以下结构：
<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>实现步骤
我们将通过以下JavaScript步骤来完成DOM的动态重组：
立即学习“Java免费学习笔记（深入）”；
1. 获取目标DOM元素
首先，我们需要获取需要操作的现有DOM元素的引用。使用document.querySelector()方法，并确保提供正确的CSS选择器（对于类名，前面需要加点.）。
let burger = document.querySelector('.burger');
let navItems = document.querySelector('.nav-items');
let btn = document.querySelector('.action-btn');
let navbar = document.querySelector('.navbar'); // 父容器，用于插入新元素2. 创建新的容器元素
接下来，我们创建一个新的div元素，作为.nav-items和.action-btn的父容器。
let navGroup = document.createElement('div');
navGroup.className = 'navgroup'; // 为新容器添加类名3. 条件判断与DOM操作
为了实现响应式行为，我们会在特定条件下（例如，当视口宽度小于等于600像素时）执行DOM操作。
if (document.documentElement.clientWidth <= 600) {
// 3.1 将现有元素移动到新容器中
// 注意：当一个元素被appendChild到新父元素时，它会自动从原父元素中移除。
// 确保按照最终结构中期望的顺序添加。
navGroup.appendChild(navItems);
navGroup.appendChild(btn);
// 3.2 将新容器插入到DOM中
// 我们希望将 navGroup 插入到 burger 元素之后。
// 可以使用 Element.after() 方法（现代且简洁），
// 或者使用 Node.parentNode.insertBefore() 配合 nextElementSibling。
burger.after(navGroup);
// 如果需要兼容旧浏览器或更通用：
// navbar.insertBefore(navGroup, burger.nextElementSibling);
}完整示例代码
将上述步骤整合，形成完整的JavaScript代码：
// 获取所有需要操作的DOM元素
let burger = document.querySelector('.burger');
let navItems = document.querySelector('.nav-items');
let btn = document.querySelector('.action-btn');
let navbar = document.querySelector('.navbar'); // 父容器
// 创建新的 div 元素作为容器
let navGroup = document.createElement('div');
navGroup.className = 'navgroup'; // 设置类名
// 检查当前视口宽度，执行条件性DOM操作
if (document.documentElement.clientWidth <= 600) {
// 将 navItems 和 btn 移动到 navGroup 容器中
// 注意：appendChild 会自动将元素从其当前父级中移除
navGroup.appendChild(navItems);
navGroup.appendChild(btn);
// 将新创建的 navGroup 容器插入到 burger 元素之后
// burger.after(navGroup) 是一个现代且简洁的方法
// 如果需要更广泛的兼容性，可以使用：
// navbar.insertBefore(navGroup, burger.nextElementSibling);
burger.after(navGroup);
}注意事项
- CSS选择器准确性: 始终确保document.querySelector()中使用正确的CSS选择器。对于类名，必须以点.开头。
- DOM操作的原子性: 当一个元素通过appendChild()或insertBefore()等方法被添加到新的位置时，它会自动从其原有位置移除。这意味着您不需要手动删除旧元素。
- 元素插入位置: Element.after()方法（以及Element.before()）是ES6之后引入的，提供了更直观的元素插入方式。如果需要兼容老旧浏览器，可以使用Node.parentNode.insertBefore(newNode, referenceNode.nextElementSibling)来实现在referenceNode之后插入newNode。
