JavaScript 中怎么把 DOM 节点包裹在一层新标签里-js教程-PHP中文网

wrap()需手动实现，推荐parentnode.insertbefore()+appendchild()或replacechild()；批量处理需转数组；outerhtml简单但会丢失事件和状态。

javascript 中怎么把 dom 节点包裹在一层新标签里

用 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 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);
});