【JavaScript】appendChild一个的注意点之会删除原dom树节点

最新推荐文章于 2021-06-23 02:36:03 发布

置顶

缝合怪

最新推荐文章于 2021-06-23 02:36:03 发布

阅读量918

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/xzxlemontea/article/details/108766626

版权

本文探讨了JavaScript的appendChild方法如何影响DOM树。当使用appendChild将节点添加到新位置时，该节点会从原始位置移除。通过一个例子展示了如何使用appendChild将节点添加到DocumentFragment时，会导致原DOM树中的节点被删除。了解这一行为对于理解和避免意外修改DOM至关重要。

摘要由CSDN通过智能技术生成

最近在研究学习vue原理，其中使用createDocumentFragment()方法，是用来创建一个虚拟的节点对象，那问题来了，创建了虚拟dom树，且最后只渲染了虚拟dom树里面的节点，那原dom树的节点去哪里了，查阅了MDN等相关资料，发现是appendChild在搞搞震。

--------------------------------------------------------------------------------------------------------------------------------

首先看一下MDN上对appendChild的定义：

Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。

这意味着，一个节点不可能同时出现在文档的不同位置。所以，如果某个节点已经拥有父节点，在被传递给此方法后，它首先会被移除，再被插入到新的位置。若要保留已在文档中的节点，可以先使用 Node.cloneNode() 方法来为它创建一个副本，再将副本附加到目标父节点下。请注意，用 cloneNode 制作的副本不会自动保持同步。