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

Question

试图在vanilla JavaScript中将子元素移动到父元素外，然后删除父元素本身。当前代码大致如下：

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

期望的输出：

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

- Ao C

---

lol 目前代码看起来像这样...其实没有代码...它是你的 HTML。 - JonH

我记得HTML是代码。我重新创建了一个简化版本，因为我想了解如何处理这种情况。 - Ao C

没错...但你说得好像你尝试了某种客户端代码...实际上你只是发布了静态HTML。 - JonH

我已经尝试了多种方法在控制台中实现，并且在提问之前我已经让它工作了，但是我想要一个更好的方法。现在是否必须发布所有草稿？我正在尝试学习一些我不理解的东西，发布我的草稿会使这篇文章变得不必要地冗长。 - Ao C

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>

- Michał Perłakowski

---

这个有效，谢谢。为什么这样做时，outerHTML不会覆盖父元素外的任何div？这正是我想要的，只是我很好奇，因为我本以为outerHTML的新内容只会是子元素。 - Ao C

@AoC element.innerHTML 是元素的内容。element.outerHTML 是元素本身和其内容。请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML 和 https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML。 - Michał Perłakowski

Answer 2

您可以像@MichałPerłakowski的答案一样使用.outerHTML和.innerHTML，如果您对速度（将HTML解析为DOM节点）不是很关心，并且不关心附加的事件侦听器等，则这很好。

更有效和弹性的解决方案是通过操作dom元素来实现：

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

- mPrinC