HTML DOM 原生JS给当前元素外套个父元素，删除当前元素的父元素(保留当前元素自身)

最近遇见个需求，进入页面后想改一下页面结构。给当前某个元素添加(外包)个父元素。

当前页面结构

通过原生js动态的给h1标签外包个父元素

// 创建外 套的父元素
const divElement = document.createElement('div')
// 获取当前元素
const h1Element = document.querySelector('h1')

// insertBefore(1, 2)  1 需插入的节点对象 ；   2 在该节点之前插入新节点的子节点
h1Element.parentNode.insertBefore(divElement, h1Element.nextElementSibling)
divElement.appendChild(h1Element)

改变后的页面结构

既然添加了当然可以删除 删除当前元素的父元素(保留当前元素自身)

当前页面结构

如果直接当前元素的父元素，会将父元素的子元素也一起删除。还是用insertBefore方法把子元素先拿出来，再删除。

// 获取要删除的dom节点
const divElement = document.querySelector('.container')
const h1Element = document.querySelector('h1')

// insertBefore(1, 2)  1 需插入的节点对象 ；   2 在该节点之前插入新节点的子节点
divElement.parentNode.insertBefore(h1Element, divElement.nextElementSibling)

divElement.remove()

谢谢观看