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

Question

尝试将子级移出父级，然后在普通 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>