理解核心概念
要实现动态封装，我们需要掌握以下几个关键的 dom 操作方法：
- document.createElement(tagName): 用于创建一个新的 HTML 元素。
- Node.setAttribute(name, value) / Element.id / Element.classList.add(): 用于设置新元素的属性，如 id 或 class。
- Node.parentNode: 获取元素的父节点。
- Node.insertBefore(newNode, referenceNode): 在 referenceNode 之前插入 newNode。
- Node.nextSibling: 获取元素的下一个兄弟节点。
- Node.append(nodeOrDOMString) / Node.appendChild(node): 将一个或多个节点或 DOM 字符串添加到父节点的末尾。当一个元素被添加到新的父节点时，它会自动从其原有的父节点中移除。
动态封装元素的步骤
我们将通过一个具体的示例来演示如何将多个 input 元素封装到一个新的 div 中。
初始 HTML 结构
假设我们有以下 HTML 代码，其中包含三个 input 元素，它们都是同级元素，没有共同的父容器：
<input type="checkbox" class="some_class" id="element_1"> <input type="checkbox" class="some_class" id="element_2"> <input type="checkbox" class="some_class" id="element_3">
我们的目标是将其转换为：
<div class="example" id="new_div"> <input type="checkbox" class="some_class" id="element_1"> <input type="checkbox" class="some_class" id="element_2"> <input type="checkbox" class="some_class" id="element_3"> </div>
JavaScript 实现
以下是实现上述封装功能的 JavaScript 代码：
立即学习“Java免费学习笔记（深入）”；
/**
* 在参考节点之后插入新节点
* @param {Node} referenceNode - 参考节点
* @param {Node} newNode - 要插入的新节点
*/
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
// 1. 创建新的父容器 div
const newDiv = document.createElement("div");
newDiv.id = "new_div";
newDiv.classList.add("example"); // 添加 class 便于样式控制
// 2. 选取所有需要被封装的元素
// 这里我们选择所有 class 为 'some_class' 的 input 元素
const targetElements = document.querySelectorAll(".some_class");
// 3. 将新创建的 div 插入到 DOM 中
// 我们选择将新 div 插入到最后一个目标元素之后。
// 这样做的目的是为后续将目标元素移动到新 div 中做准备。
if (targetElements.length > 0) {
const lastTargetElement = targetElements[targetElements.length - 1];
insertAfter(lastTargetElement, newDiv);
// 4. 将所有目标元素移动到新的 div 容器中
// 当元素被 append 到新父节点时，它会自动从原父节点中移除
targetElements.forEach(element => newDiv.append(element));
} else {
console.warn("没有找到需要封装的元素。");
}代码解析
- insertAfter 辅助函数: 这个函数是一个通用的工具，用于在指定节点之后插入一个新节点。它通过获取参考节点的父节点，然后在其父节点中，将新节点插入到参考节点的下一个兄弟节点之前来实现。
- 创建新 div: document.createElement("div") 创建了一个新的 div 元素，并为其设置了 id 和 class。
- 选取目标元素: document.querySelectorAll(".some_class") 选取了所有带有 some_class 的 input 元素。这是关键一步，你需要根据实际的 HTML 结构来调整选择器，以准确捕获所有需要封装的元素。
- 插入新 div 到 DOM: 如果找到了目标元素，我们将 newDiv 插入到最后一个目标元素之后。这一步确保了 newDiv 在 DOM 中有一个位置，并且靠近它将要包含的元素。
- 移动目标元素: targetElements.forEach(element => newDiv.append(element)) 遍历所有选定的目标元素，并将它们逐个添加到 newDiv 中。由于 DOM 操作的特性，当一个元素被 append 到一个新的父节点时，它会自动从其原来的父节点中移除，从而实现了“移动”的效果。
实际应用场景与注意事项
在实际项目中，你可能会遇到更复杂的 HTML 结构。以下是一些扩展的考虑：
封装不同类型的相邻元素
假设你的 HTML 结构如下，包含 label 和 input 元素：
<label for="plugin_delete_me_shortcode_password">Password</label>
<input type="password" autocomplete="off" autofocus="autofocus" id="plugin_delete_me_shortcode_password" name="plugin_delete_me_shortcode_password">
<input type="checkbox" class="togglePw" id="pw_3" onclick="showPassword('plugin_delete_me_shortcode_password')">
<label for="pw_3" class="fa"></label>如果你希望将所有这些相邻的 label 和 input 元素封装到一个新的 div 中，你需要调整选择器来匹配所有这些元素。
// ... (insertAfter 函数保持不变)
const newDiv = document.createElement("div");
newDiv.id = "new_div_complex";
newDiv.classList.add("example"); // 可以添加样式，例如边框，使其更明显
// 选取所有 label 和 input 元素
const complexElements = document.querySelectorAll("label, input");
if (complexElements.length > 0) {
const lastComplexElement = complexElements[complexElements.length - 1];
insertAfter(lastComplexElement, newDiv); // 将新 div 插入到最后一个选定元素之后
complexElements.forEach(element => newDiv.append(element)); // 将所有选定元素移动到新 div 中
} else {
console.warn("没有找到需要封装的复杂元素组。");
}这段代码会选取所有的 label 和 input 元素，并将它们全部移动到新创建的 div 中。
CSS 样式
为了让新创建的父容器在视觉上更明显，你可以为其添加一些 CSS 样式：
.example {
border: 1px solid black;
width: 200px;
padding: 10px;
margin: 10px 0; /* 增加一些外边距，使其与周围内容分离 */
}性能考虑
对于大量元素的 DOM 操作，可能会引起浏览器重排（reflow）和重绘（repaint），从而影响页面性能。对于大多数常见场景，上述方法性能影响可忽略不计。如果需要处理成百上千个元素，可以考虑以下优化：
- 离线操作: 先将目标元素从 DOM 中移除，在内存中完成封装，然后再将新容器及其内容一次性插入回 DOM。
- 使用 DocumentFragment: DocumentFragment 是一种轻量级的文档对象，可以作为临时容器来构建 DOM 结构，然后将其一次性插入到文档中，减少 DOM 操作次数。
jQuery 的 wrapAll() 方法
如果你正在使用 jQuery，这个任务会变得非常简单。jQuery 提供了 wrapAll() 方法，可以直接将一组元素封装到一个新的父容器中：
// 假设你已经引入了 jQuery
$(".some_class").wrapAll("<div id='new_div_jquery' class='example'></div>");尽管 jQuery 提供了更简洁的语法，但理解原生 JavaScript 的实现原理对于深入学习前端开发至关重要。
总结
通过 JavaScript 动态地为一组没有共同父容器的 HTML 元素添加父容器，是前端开发中一项实用且常见的技能。本文详细介绍了使用原生 JavaScript 实现这一功能的步骤、代码示例以及在实际应用中的注意事项。掌握这些 DOM 操作技巧，将使你能够更灵活、更高效地控制网页的结构和布局。
