我创建了一个'p'节点并将其添加到'body'中。
接下来,我更改了该节点的样式并将其从'body'中移除。这很有效。
但是当我在更改'body.innerHTML'后做同样的事情时,它没有起作用。
控制台显示:
接下来,我更改了该节点的样式并将其从'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>
innerHTML
。这会用从字符串构建的新节点替换完整的DOM,并删除您在DOM中存储或引用的事件处理程序和其他所有数据。 - Bergi