将 HTML 子元素移出父元素并删除父元素

Question

尝试将子级移出父级，然后在 vanilla JavaScript 中删除父级本身。 当前代码如下所示：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

期望的输出：

<div class="child"></div>
<div class="child"></div>

Answer 1

尝试将outerHTML属性设置为innerHTML属性。

const parent = document.querySelector('.parent')
parent.outerHTML = parent.innerHTML

看现场演示：

 console.log('Before change: ', document.querySelector('.container').innerHTML) const parent = document.querySelector('.parent') parent.outerHTML = parent.innerHTML console.log('After change: ', document.querySelector('.container').innerHTML)

 <div class="container"> <div class="parent"> <div class="child"></div> <div class="child"></div> </div> </div>

Answer 2

您可以按照@MichałPerłakowski 的回答使用. outerHTML . outerHTML和. innerHTML . innerHTML ，如果您对速度（将 HTML 解析为 DOM 节点）不挑剔并且不关心附加的事件侦听器等，则可以。

更有效和更有弹性的解决方案是使用 dom 元素：

while(parentElement.childNodes.length){
    parentElement.before(parentElement.childNodes[0]);
}
parentElement.remove();