有没有孩子节点的生活范围？

我做了一个'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>

来源

2017-07-17 Donggi Kim

[**不要使用'innerHTML' **]（https://stackoverflow.com/questions/595808/is-it-possible-to-append-to-innerhtml-without-destroying-descendants-onclick功能处理程序），它将完整的DOM交换出来，并用从字符串构造的新节点替换它。它还会删除您在DOM中存储或引用的事件处理程序和每个其他数据。 – Bergi

你的问题是，第一，你设定的元素添加到身体：

body.appendChild(p);

然后你清除体内的innerHTML：

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

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

创建所以，现在当你调用一个：

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

出现的错误。

来源

2017-07-17 07:05:30

当你这样

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

你比p创建另一个元素实例，所以当你试图将其删除这种方式追加款：

body.removeChild(p);

试图删除的东西是不是目前在你的文件呢。

来源

2017-07-17 07:05:59

有没有孩子节点的生活范围？

回答

相关问题