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右键菜单效果代码
Jul 21 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
Zend公司全球首推PHP认证
2006/10/09 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
python线程池threadpool实现篇
2018/04/27 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
奉献爱心演讲稿
2014/09/04 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
法律意见书范文
2015/05/20 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis