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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
详解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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
几个学习PHP的网址
2006/11/25 PHP
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
python进程与线程小结实例分析
2018/11/11 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
下载糗事百科的内容_python版
2008/12/07 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
Python实现EM算法实例代码
2020/10/04 Python
python FTP编程基础入门
2021/02/27 Python
《三顾茅庐》教学反思
2014/04/10 职场文书
代理人委托书
2014/08/01 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
合作意向书范本
2019/04/17 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
Python 多线程处理任务实例
2021/11/07 Python
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android