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

查看现场演示：

＆＃13;

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)

＆＃13;

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

＆＃13;

Answer 2

您可以像使用. outerHTML和. innerHTML的@MichałPerłakowski答案中那样进行操作，如果您对速度不要求严格（将HTML解析为DOM节点）并且不关心附加事件，则可以这样做听众，等等。

更有效和更具弹性的解决方案是通过处理dom元素：

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

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

2 个答案: