问题描述

最近在做项目时,遇到一个问题,当js生成一个组件后,会注入到页面的某个节点里显示。在组件内部进行了一次注入操作,在调用组件的外部js文件中也进行了一次注入操作,结果发现页面里只生成了一份组件的代码,而并不是两份。

原因

后来通过浏览器的调试工具,打断点发现所谓的注入操作其实就是appendChild方法的调用。appendChild()这个方法再熟悉不过了,把子节点插入到父节点的最后。

再复习下appendChild()这个方法的定义:将一个节点插入到指定的父节点的最末尾处(也就是成为了这个父节点的最后一个子节点)。appendChild 方法会把要插入的这个节点引用作为返回值返回。如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置,也就是同样的节点在文档中只会出现一次。如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置。

所以很明显能发现,当组件内部的注入操作执行时,也就是appendChild方法执行时,组件的节点被添加到页面上。当第二次执行appendChild方法时,则会把原先的组件节点移除,然后在新的位置再插入一次。所以组件的代码最终在页面上只会出现一份。

总结

基础知识很重要。要把基础打牢,这样遇到问题后就很容易能够理解。

踩坑所引发出的appendChild方法的介绍的更多相关文章

  1. MySQL切换版本踩坑记录(包括恢复数据方法)

    踩坑起因:在创建数据库时, 字段:create_time datetime DEFAULT CURRENT_TIMESTAMP, 报异常--Error Code: 1067 - Invalid def ...

  2. jQuery升级踩坑大全

    jQuery升级踩坑大全 背景 jQuery想必各个web工程师都再熟悉不过了,不过现如今很多网站还采用了很古老的jQuery版本.其实如果早期版本使用不当,可能会有DOMXSS漏洞,非常建议升级到j ...

  3. jQuery版本升级踩坑大全

    背景 -------------------------------------------------------------------------------- jQuery想必各个web工程师 ...

  4. 踩坑了!使用 @Autowired 注入成功,GetBean 方法却获取不到?!

    本文首发于个人微信公众号:Coder小黑 踩坑了?! 之前推文已经讲过 当@Transactional遇到@CacheEvict,你的代码是不是有bug! 现在要在事务提交之后清除缓存.在Spring ...

  5. Django model重写save方法及update踩坑记录

    一个非常实用的小方法 试想一下,Django中如果我们想对保存进数据库的数据做校验,有哪些实现的方法? 我们可以在view中去处理,每当view接收请求,就对提交的数据做校验,校验不通过直接返回错误, ...

  6. Vue packages version mismatch的解决方法 初来乍到,踩坑日常

    初来乍到,踩坑日常 这个问题也是我也是接受别人项目,出现的问题,在下载好依赖后运行的时候报这样的错误 它上面显示两个版本一个vue的版本,一个vue-template-compiler版本,我这边忘了 ...

  7. djangorestframework+vue-cli+axios,为axios添加token作为headers踩坑记

    情况是这样的,项目用的restful规范,后端用的django+djangorestframework,前端用的vue-cli框架+webpack,前端与后端交互用的axios,然后再用户登录之后,a ...

  8. html2canvas截屏在H5微信移动端踩坑,ios和安卓均可显示

    1.最近在做移动端开发,框架是vue,一产品需求是,后台返回数据,通过qrcode.js(代码比较简单,百度上已经很多了)生成二维码,然后通过html2canvas,将html元素转化为canvas, ...

  9. 微信小程序之mpvue+iview踩坑之旅

    因为之前参照微信的原生的文档写过一些小程序的demo,写的过程比较繁琐,后来出了美团的mpvue,可以直接使用vue开发,其他的不作对比,这篇文章记录一下踩坑之旅. 参照mpvue http://mp ...

随机推荐

  1. GJM :SqlServer语言学习笔记

    ----------------------------SqlServer RDBMS 关系型数据库管理系统 Row/Record 行 Colimn/Attribute 列 Field/Cell 字段 ...

  2. CocoaPods安装及使用详情

    CocoaPods是什么? 当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,SDWebImage等等.可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而其他 ...

  3. [Erlang 0107] Erlang实现文本截断

       抽时间处理一下之前积压的一些笔记.前段时间有网友 @稻草人 问字符串截断的问题"各位大侠 erlang截取字符串一般用哪个函数啊",有人支招用string:substr/3, ...

  4. MS SQL统计信息浅析下篇

       MS SQL统计信息浅析上篇对SQL SERVER 数据库统计信息做了一个整体的介绍,随着我对数据库统计信息的不断认识.理解,于是有了MS SQL统计信息浅析下篇. 下面是我对SQL Serve ...

  5. 深入理解SQL的四种连接-左外连接、右外连接、内连接、全连接(转)

    1.内联接(典型的联接运算,使用像 =  或 <> 之类的比较运算符).包括相等联接和自然联接.     内联接使用比较运算符根据每个表共有的列的值匹配两个表中的行.例如,检索 stude ...

  6. 从零自学Hadoop(03):Linux准备上

    阅读目录 序 检查列表 常用Linux命令 搭建环境 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,Sou ...

  7. oracle查看对象信息

    1.查看某用户下所有对象的信息: SELECT owner, object_type, status, COUNT(*) count# FROM all_objects where owner='xx ...

  8. java实现串口通讯

    一. 准备工作 1. 点击此下载java串口通讯相关工具 2. 将RXTXcomm.jar放到  %JAVA_HOME%\jre\lib\ext\  目录下,工程中引入该jar包 3. 将rxtxSe ...

  9. mysql 主从复制配置

    环境:已经在centos下安装好mysql,安装参考:http://www.cnblogs.com/bookwed/p/5896619.html,安装好主数据库后,可以克隆一份,注意修改ip等. 19 ...

  10. 修复Grub引导

    1.运行终端,输入命令: sudo fdisk -l 找到linux所在的盘符,例如/dev/sdaX 2.获取root权限 3.mount mount –bind /proc /mnt/proc m ...