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

-3

尝试将子项移到父项之外，然后在香草JavaScript中删除父项本身。当前的代码看起来是这样的：将HTML子元素移出父项并删除父元素

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

所需的输出：

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

来源

2016-08-23 Ao C

笑当前的代码看起来像这样...没有code..its您的HTML。 – JonH

最后我记得，HTML代码。我重新创建了我所拥有的简化版本，因为我想了解如何处理这种情况。 –

正确...但你说过，就好像你尝试了某种客户端代码......你没有尝试过任何你发布静态html的东西。 – JonH

尝试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>

来源

2016-08-23 20:20:49

这工作谢谢，为什么通过这样做，outerHTML不会覆盖父级以外的任何div？这就是我想要的，我只是好奇，因为我会认为外部HTML的新内容只会是孩子。 –

@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 –

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

回答

相关问题