是否有子节点的存活范围？

Question

我创建了一个'p'节点并将其添加到'body'中。
接下来，我更改了该节点的样式并将其从'body'中移除。这很有效。
但是当我在更改'body.innerHTML'后做同样的事情时，它没有起作用。
控制台显示：

未捕获的NotFoundError：无法执行'removeChild'操作'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>

- Donggi Kim

---

不要使用innerHTML。这会用从字符串构建的新节点替换完整的DOM，并删除您在DOM中存储或引用的事件处理程序和其他所有数据。 - Bergi

Answer 1

您的问题在于，首先您将元素添加到了页面主体中：

body.appendChild(p);

然后您正在清除body的innerHTML：

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

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

因此，现在当你调用：

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

错误发生了。

- Alexander Higgins

Answer 2

当您以这种方式附加段落时

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

你创建了另一个元素实例而不是 p，因此当你尝试以这种方式移除它时：

body.removeChild(p);

您试图删除尚未出现在文档中的内容。

- C.Champagne