wrap()需手动实现，推荐parentNode.insertBefore()+appendChild()或replaceChild()；批量处理需转数组；outerHTML简单但会丢失事件和状态。
用 wrap() 方法最方便，但原生 JavaScript 没有这个方法，需手动实现。核心思路是：创建新元素 → 把原节点插入新元素 → 再把新元素替换原节点在 DOM 中的位置。
用 parentNode.insertBefore() + appendChild()
这是兼容性最好、逻辑最清晰的方式：
- 先创建要包裹用的新元素（如
div） - 用
parentNode.insertBefore(新元素, 原节点)把新元素插到原节点前面 - 再用
新元素.appendChild(原节点)把原节点移进去
示例：
const el = document.getElementById('myDiv');
const wrapper = document.createElement('section');
el.parentNode.insertBefore(wrapper, el);
wrapper.appendChild(el);
用 replaceChild() 更简洁
一步替换，语义更明确：
立即学习“Java免费学习笔记（深入）”；
Java Development Manual
下载
Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...
- 创建新元素
- 往新元素里添加原节点（
appendChild） - 调用父节点的
replaceChild(新元素, 原节点)
注意：必须确保原节点有父节点，否则会报错。
const el = document.querySelector('.item');
const wrapper = document.createElement('article');
wrapper.appendChild(el);
el.parentNode.replaceChild(wrapper, el);
批量包裹多个节点
如果要包裹一组元素（比如所有 p），可以遍历 NodeList 并逐个处理。注意要用 Array.from() 或扩展运算符转成数组，避免动态集合问题：
- 直接对
querySelectorAll结果循环会出错（因为每次操作 DOM 后 NodeList 可能变化） - 推荐先转成数组再遍历
document.querySelectorAll('p').forEach(p => {
const wrapper = document.createElement('div');
wrapper.className = 'paragraph-wrapper';
wrapper.appendChild(p);
p.parentNode.replaceChild(wrapper, p);
});
用 outerHTML（简单但有局限）
适合纯 HTML 场景，不涉及复杂事件或数据绑定：
- 修改节点的
outerHTML，用新标签包住它的outerHTML - 例如：
el.outerHTML = '<nav>' + el.outerHTML + '</nav>'
⚠️ 注意：这会销毁原节点——所有绑定的事件监听器、JS 引用、表单状态都会丢失，慎用于交互型元素。
