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

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

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

期望输出：

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

---

尝试将

outerHTML

属性设置为

innerHTML

属性

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

见现场演示：

console.log（'更改前：'，document.querySelector（'.container'）.innerHTML）
const parent=document.querySelector（“.parent”）
parent.outerHTML=parent.innerHTML
console.log（'After change:'，document.querySelector（'.container'）.innerHTML）

---

您可以使用

在@MichałPerłakowski答案中这样做。outerHTML

和

。innerHTML

，如果您对速度（将HTML解析为DOM节点）不挑剔，也不关心附加的事件侦听器等，那么这是可以的

更高效、更具弹性的解决方案是与dom元素相结合：

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

---

lol目前的代码看起来像这样…没有代码..这是你的html。最后我记得，html是代码。我重新创建了一个简化版，因为我想了解如何处理这样的情况。对。。。但您说的好像您尝试了某种客户端代码……您并没有尝试发布任何静态html。我在console中以多种方式尝试了这一点，在询问之前，我已将其付诸实施，但希望采用更好的方法。现在是否有义务发布所有刮擦工作？我正在努力学习一些我不理解的东西，发布我的废品工作会使这篇文章变得不必要的长。这篇文章很有效，谢谢，为什么这样做，outerHTML不会覆盖父级之外的任何div？这就是我想要的，我只是好奇，因为我会认为外部HTML的新内容只会是子元素。@AoC

element.innerHTML

是元素的内容<代码>元素。outerHTML是元素的内容加上元素本身。看到和