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 相关文章推荐
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
js实现简单音乐播放器
Jun 30 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 CURL模拟GET及POST函数代码
2010/04/25 PHP
PHP学习之正则表达式
2011/04/17 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
JQuery从头学起第一讲
2010/07/04 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
vue登录注册实例详解
2019/09/14 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Linux下python3.7.0安装教程
2018/07/30 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
django认证系统 Authentication使用详解
2019/07/22 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
食品安全检查制度
2014/02/03 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
财政局个人年终总结
2015/03/03 职场文书
寒假生活随笔
2015/08/15 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android