踩坑所引发出的appendChild方法的介绍
问题描述
最近在做项目时,遇到一个问题,当js生成一个组件后,会注入到页面的某个节点里显示。在组件内部进行了一次注入操作,在调用组件的外部js文件中也进行了一次注入操作,结果发现页面里只生成了一份组件的代码,而并不是两份。
原因
后来通过浏览器的调试工具,打断点发现所谓的注入操作其实就是appendChild方法的调用。appendChild()这个方法再熟悉不过了,把子节点插入到父节点的最后。
再复习下appendChild()这个方法的定义:将一个节点插入到指定的父节点的最末尾处(也就是成为了这个父节点的最后一个子节点)。appendChild
方法会把要插入的这个节点引用作为返回值返回。如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置,也就是同样的节点在文档中只会出现一次。如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode
方法复制出一个节点的副本,然后在插入到新位置。
所以很明显能发现,当组件内部的注入操作执行时,也就是appendChild方法执行时,组件的节点被添加到页面上。当第二次执行appendChild方法时,则会把原先的组件节点移除,然后在新的位置再插入一次。所以组件的代码最终在页面上只会出现一份。
总结
基础知识很重要。要把基础打牢,这样遇到问题后就很容易能够理解。
踩坑所引发出的appendChild方法的介绍的更多相关文章
- MySQL切换版本踩坑记录(包括恢复数据方法)
踩坑起因:在创建数据库时, 字段:create_time datetime DEFAULT CURRENT_TIMESTAMP, 报异常--Error Code: 1067 - Invalid def ...
- jQuery升级踩坑大全
jQuery升级踩坑大全 背景 jQuery想必各个web工程师都再熟悉不过了,不过现如今很多网站还采用了很古老的jQuery版本.其实如果早期版本使用不当,可能会有DOMXSS漏洞,非常建议升级到j ...
- jQuery版本升级踩坑大全
背景 -------------------------------------------------------------------------------- jQuery想必各个web工程师 ...
- 踩坑了!使用 @Autowired 注入成功,GetBean 方法却获取不到?!
本文首发于个人微信公众号:Coder小黑 踩坑了?! 之前推文已经讲过 当@Transactional遇到@CacheEvict,你的代码是不是有bug! 现在要在事务提交之后清除缓存.在Spring ...
- Django model重写save方法及update踩坑记录
一个非常实用的小方法 试想一下,Django中如果我们想对保存进数据库的数据做校验,有哪些实现的方法? 我们可以在view中去处理,每当view接收请求,就对提交的数据做校验,校验不通过直接返回错误, ...
- Vue packages version mismatch的解决方法 初来乍到,踩坑日常
初来乍到,踩坑日常 这个问题也是我也是接受别人项目,出现的问题,在下载好依赖后运行的时候报这样的错误 它上面显示两个版本一个vue的版本,一个vue-template-compiler版本,我这边忘了 ...
- djangorestframework+vue-cli+axios,为axios添加token作为headers踩坑记
情况是这样的,项目用的restful规范,后端用的django+djangorestframework,前端用的vue-cli框架+webpack,前端与后端交互用的axios,然后再用户登录之后,a ...
- html2canvas截屏在H5微信移动端踩坑,ios和安卓均可显示
1.最近在做移动端开发,框架是vue,一产品需求是,后台返回数据,通过qrcode.js(代码比较简单,百度上已经很多了)生成二维码,然后通过html2canvas,将html元素转化为canvas, ...
- 微信小程序之mpvue+iview踩坑之旅
因为之前参照微信的原生的文档写过一些小程序的demo,写的过程比较繁琐,后来出了美团的mpvue,可以直接使用vue开发,其他的不作对比,这篇文章记录一下踩坑之旅. 参照mpvue http://mp ...
随机推荐
- 移动H5前端性能优化指南
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- atitit.农历的公式与原理以及农历日期运算
atitit.农历的公式与原理以及农历日期运算 1. 农历的概述1 2. 如何在电脑程序里面计算农历??1 3. 农历的公式2 4. 获取当日农历日历3 5. 历史日期公式加查表才能得到精确日期3 6 ...
- 一个有趣的CM
系统 : Windows xp 程序 : Crackme#3 - Self Destructed 程序下载地址 :http://pan.baidu.com/s/1kVxwlaZ 要求 : 注册机编写 ...
- 理解java虚拟机内存分配堆,栈和方法区
栈:存放局部变量 堆:存放new出来的对象 方法区:存放类的信息,static变量,常量池(字符串常量) 在堆中,可以说是堆的一部分 创建了一个student类,定义了name属性, id静态变量 ...
- iOS开发-UI 从入门到精通(四)
一.UITextField 1.UITextField是什么? (1)UITextField(输入框):是控制文本输入和显示的控件.在App中UITextField出现频率也比较高: (2)iOS系统 ...
- 基于Ruby的Watir-WebDriver自动化测试框架
基于Ruby的watir-webdriver自动化测试方案与实施(五) 基于Ruby的watir-webdriver自动化测试方案与实施(四) 基于Ruby的watir-webdriver自动 ...
- JavaWeb工程中web.xml基本配置
一.理论准备 先说下我记得xml规则,必须有且只有一个根节点,大小写敏感,标签不嵌套,必须配对. web.xml是不是必须的呢?不是的,只要你不用到里面的配置信息就好了,不过在大型web工程下使用该文 ...
- Sql--order by、desc降序、top
---------通过order by 语句进行排序: --1.降序order by 列名desc --2.升序order by 列名 或order by 列名asc --3.order by语句 ...
- RMAN冷备份异机还原
1:环境准备 在新的服务器上安装ORACLE实例,安装过程中需要注意源服务器与目标服务器的ORACLE_SID一致,另外确保安装路径与源路径一致(不仅是安装目录,甚至包括数据文件.控制文件目录.联机重 ...
- 实战:考虑性能--Solr索引的schema设计
从 high level 的角度来看,schema.xml 结果如下,这个例子虽然不是一个真实的XML,但是简洁明了的传达了shema的概念. <schema> <types> ...