javascript - 是否有子节点存活范围？

Question

我制作了一个“p”节点并将其附加到“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>
	function func1() {
		var body = document.body;
		var p = document.createElement('p');
		p.id = 'p1';
		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>';
		body.appendChild(p);
		p.style.color = '#0055aa';
		p.style.backgroundColor = '#ffaa00';
    
		// body.removeChild(p); // It works.
		body.innerHTML += '<p>' + p.innerHTML + '</p>';
		body.removeChild(p); // It doesn't work.
  }
</script>

Answer 1

你的问题是首先你设置将元素添加到正文:

body.appendChild(p);

然后你正在清除 body 的 innerHTML:

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

一旦你这样做了 p您创建的不再是主体中的节点。新<p>您创建的与 var p = document.createElement('p'); 创建的不同

所以现在当你打电话时:

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

发生错误。