JS中appendChild追加子节点无效的解决方法


Posted in Javascript onOctober 14, 2018

JS中appendChild追加子节点无效

有这么一段代码:

let divs = document.getElementsByClassName('test');
let btn = document.createElement('div');

for(let i=0;i<divs.length;i++){
 divs[i].appendChild(btn);
}

表面上这段代码为每个 class属性为 test的元素添加一个 div子元素。

看起来没有什么问题,但是执行完之后却发现子元素并没有成功添加,也没有报错。

这其实是因为一个元素只能有一个父元素,上面这段代码试图将 btn添加到多个元素中。

而这与一个元素只能有一个父元素相矛盾,自然就添加不了。

解决办法也很简单,就是将 btn的声明语句放到循环里面去,这样每次添加的 btn都是不同的元素,自然也就没有上面的问题了。

代码如下:

let divs = document.getElementsByClassName('test');

for(let i=0;i<divs.length;i++){
 let btn = document.createElement('div');
 divs[i].appendChild(btn);
}

附:JS原生追加子节点

var fragment = document.createDocumentFragment();
li = document.createElement('li');
li.className = "xxx";
fragment.appendChild(li); 
document.getElementById("xx").appendChild(fragment);

如上,需要先原生创建节点,节点内容成为了document的一部分才能appendchild,

如果直接  appendchild(“<div></div>”)是不可以的,

因为appendChild(Node)这个 方法一般是在指定元素节点的最后一个子节点之后添加节点 

但如果Node是页面中的DOM对象,那么就不是添加节点了,就是直接Move节点。 

appendChild你可以理解为移动一个元素。如果想复制一份过去,要事先clone 

但是不管怎样,这个node需要先存在,

append()前面是要选择的对象,后面是要在对象内插入的元素内容 

appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的对象 

实例: 

$('#a').append('content'); 
$('<div>content</div>').appendTo($('#a')); 

//注意appendTo前面一定要是Jquery对象。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
详解ES6 Symbol 的用途
Oct 14 #Javascript
javascript实现文本框标签验证的实例代码
Oct 14 #Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 #Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 #Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 #Javascript
详解webpack loader和plugin编写
Oct 12 #Javascript
深入理解Angularjs 脏值检测
Oct 12 #Javascript
You might like
php 执行系统命令的方法
2009/07/07 PHP
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
js资料toString 方法
2007/03/13 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
python定时器使用示例分享
2014/02/16 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
Python错误处理操作示例
2018/07/18 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
python 制作磁力搜索工具
2021/03/04 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
植物选择:Botanic Choice
2017/02/15 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
爱国演讲稿400字
2014/05/07 职场文书
税务会计岗位职责
2015/04/02 职场文书
法院执行局工作总结
2015/08/11 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB