踩坑所引发出的appendChild方法的介绍
问题描述
最近在做项目时,遇到一个问题,当js生成一个组件后,会注入到页面的某个节点里显示。在组件内部进行了一次注入操作,在调用组件的外部js文件中也进行了一次注入操作,结果发现页面里只生成了一份组件的代码,而并不是两份。
原因
后来通过浏览器的调试工具,打断点发现所谓的注入操作其实就是appendChild方法的调用。appendChild()这个方法再熟悉不过了,把子节点插入到父节点的最后。
再复习下appendChild()这个方法的定义:将一个节点插入到指定的父节点的最末尾处(也就是成为了这个父节点的最后一个子节点)。appendChild
方法会把要插入的这个节点引用作为返回值返回。如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置,也就是同样的节点在文档中只会出现一次。如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode
方法复制出一个节点的副本,然后在插入到新位置。
所以很明显能发现,当组件内部的注入操作执行时,也就是appendChild方法执行时,组件的节点被添加到页面上。当第二次执行appendChild方法时,则会把原先的组件节点移除,然后在新的位置再插入一次。所以组件的代码最终在页面上只会出现一份。
总结
基础知识很重要。要把基础打牢,这样遇到问题后就很容易能够理解。