子ノードの有効範囲はありますか？

Question

私は 'p'ノードを作成し、それを 'body'に追加しました。
次へノードのスタイルを変更して、それを 'body'から削除しました。そしてそれは働いた。
しかし、私は同じことを 'body.innerHTML'の変更後にやってもうまくいきませんでした。コンソールは言っ

、

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

は、なぜそれが起こるのでしょうか？

<p><button onclick="func1()">Result 1</button></p> 
 
<script> 
 
\t function func1() { 
 
\t \t var body = document.body; 
 
\t \t var p = document.createElement('p'); 
 
\t \t p.id = 'p1'; 
 
\t \t p.innerHTML = 'Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>'; 
 
\t \t body.appendChild(p); 
 
\t \t p.style.color = '#0055aa'; 
 
\t \t p.style.backgroundColor = '#ffaa00'; 
 
    
 
\t \t // body.removeChild(p); // It works. 
 
\t \t body.innerHTML += '<p>' + p.innerHTML + '</p>'; 
 
\t \t body.removeChild(p); // It doesn't work. 
 
    } 
 
</script>

Answer 1

あなたの問題は、まずあなたが体に要素を追加設定することです：

body.innerHTML += '<p>' + p.innerHTML + '</p>'; 

：

body.appendChild(p); 

その後、あなたは体のinnerHTMLプロパティをクリアしています

これを行うとpはy作成されたouは、もはや身体のノードではありません。作成した新しい<p>は、だから今、あなたが呼び出すときvar p = document.createElement('p');

によって作成されたものと同じではありません。

は

body.removeChild(p); // It doesn't work. 

エラーが発生します。

Answer 2

あなたは段落をこのよう

body.innerHTML += '<p>' + p.innerHTML + '</p>'; 

を追加するとき、あなたはそれをこのように削除しようとすると、あなたはとてもpよりも、別の要素のインスタンスを作成します。

body.removeChild(p); 

あなたがないものを削除しようあなたの書類にはまだありません。