將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子元素移出父項並刪除父元素

回答

相關問題