将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>