本教程详细介绍如何使用 JavaScript 动态地将现有的 DOM 元素（例如导航项和操作按钮）移动到新创建的容器中，以适应不同的屏幕尺寸并实现响应式布局。在现代 Web 开发中，响应式设计是不可或缺的一部分。有时，为了优化不同屏幕尺寸下的布局和用户体验，我们需要动态地调整 DOM 结构。一个常见的场景是在小屏幕设备上，将多个与导航相关的元素（例如导航链接和操作按钮）合并到一个新的容器中，以便管理或协调汉堡菜单的显示。本教程将指导您如何使用纯 JavaScript 来实现这种动态重组过程。

初始 HTML 结构和目标

如果我们有一个导航栏，初始 HTML 结构如下： lt；div class=quot；navbarquot；gt； lt；div class=quot；logoquot；gt； lt；h2gt；Logolt；/h2gt； lt；/divgt； lt；div class=quot；burgerquot；gt； lt；div class=quot；line-1quot；gt；/divgt； lt；div class=quot；line-2quot；gt； lt；/divgt； lt；div class=quot；line-3quot；gt； lt；/divgt； lt；/divgt； lt；div class=quot；nav-itemsquot；gt； lt；ulgt； lt；ligt；lt；a href=quot；#quot；gt；Homelt；/agt；lt；/ligt； lt；ligt；lt；a href=quot；#quot；gt；Aboutlt；/agt；lt；/ligt；

我们的目标是，当浏览器宽度小于等于 600 像素时，将 .nav-items 和 .action-btn 这两个元素移动到一个新创建的 .navgroup 容器中，然后将 .navgroup 插入到 .burger 元素中，形成以下结构：

接下来，我们创建一个新的 div 元素，以及 .nav-items 和 .action-btn 的前一个元素。

let navGroup = document.createElement('div')；navGroup.className = 'navgroup'； // 文件新小小方法类名电影后电影3. 判断条件和DOM操作

为了实现响应式行为，我们将在特定条件下执行DOM操作（例如，当视口宽度小于或等于600像素时）。 if (document.documentElement.clientWidth lt;= 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)；} 登录后，复制完整的示例代码。 document.querySelector('.action-btn')；let navbar = document.querySelector('.navbar')； //父电影//剧情新div元素作为容器 let navGroup = document.createElement('div')；navGroup.className = 'navgroup'； // 电影类名//检查当前宽度，实现DOM操作条件 if (document.documentElement.clientWidth lt；= 600) { //将 navItems 和 btn 移动到 navGroup 容器 // 注意：appendChild 会电影将分分全部其电影父级中 remove navGroup.appendChild(navItems(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 之后引入的，它提供了一种更直接的元素插入方法。referenceNode.nextElementSibling) 用于在 referenceNode 之后插入 newNode。

以上是 JavaScript 动态 DOM 重组：在响应式设计中将现有元素移动到新的容器，更多详情请关注乐哥常识网其他相关文章！2016 年天生的 HTML 签名样式：内联 CSS 解决方案 jQuery 中的 css(properties) 如何使用？JavaScript 中实现 CSS nth-child 逻辑：动态数组元素处理指南