踩坑所引发出的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 ...
随机推荐
- GJM :SqlServer语言学习笔记
----------------------------SqlServer RDBMS 关系型数据库管理系统 Row/Record 行 Colimn/Attribute 列 Field/Cell 字段 ...
- CocoaPods安装及使用详情
CocoaPods是什么? 当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,SDWebImage等等.可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而其他 ...
- [Erlang 0107] Erlang实现文本截断
抽时间处理一下之前积压的一些笔记.前段时间有网友 @稻草人 问字符串截断的问题"各位大侠 erlang截取字符串一般用哪个函数啊",有人支招用string:substr/3, ...
- MS SQL统计信息浅析下篇
MS SQL统计信息浅析上篇对SQL SERVER 数据库统计信息做了一个整体的介绍,随着我对数据库统计信息的不断认识.理解,于是有了MS SQL统计信息浅析下篇. 下面是我对SQL Serve ...
- 深入理解SQL的四种连接-左外连接、右外连接、内连接、全连接(转)
1.内联接(典型的联接运算,使用像 = 或 <> 之类的比较运算符).包括相等联接和自然联接. 内联接使用比较运算符根据每个表共有的列的值匹配两个表中的行.例如,检索 stude ...
- 从零自学Hadoop(03):Linux准备上
阅读目录 序 检查列表 常用Linux命令 搭建环境 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,Sou ...
- oracle查看对象信息
1.查看某用户下所有对象的信息: SELECT owner, object_type, status, COUNT(*) count# FROM all_objects where owner='xx ...
- java实现串口通讯
一. 准备工作 1. 点击此下载java串口通讯相关工具 2. 将RXTXcomm.jar放到 %JAVA_HOME%\jre\lib\ext\ 目录下,工程中引入该jar包 3. 将rxtxSe ...
- mysql 主从复制配置
环境:已经在centos下安装好mysql,安装参考:http://www.cnblogs.com/bookwed/p/5896619.html,安装好主数据库后,可以克隆一份,注意修改ip等. 19 ...
- 修复Grub引导
1.运行终端,输入命令: sudo fdisk -l 找到linux所在的盘符,例如/dev/sdaX 2.获取root权限 3.mount mount –bind /proc /mnt/proc m ...