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 相关文章推荐
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
京东优选小程序的实现代码示例
Feb 25 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防注入及开发安全详细解析
2013/08/09 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
Python将图片转换为字符画的方法
2020/06/16 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
django+mysql的使用示例
2018/11/23 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
python3 xpath和requests应用详解
2020/03/06 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
美国现代家具购物网站:LexMod
2019/01/09 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
捐款倡议书范文
2014/02/02 职场文书
采购求职信
2014/03/17 职场文书
2016情人节宣传语
2015/07/14 职场文书
春节慰问简报
2015/07/21 职场文书
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS