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 getMonth()日期函数的值域是0-11
Feb 15 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 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初学入门
2006/11/19 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
python传递参数方式小结
2015/04/17 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
使用python实现ANN
2017/12/20 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
python Kmeans算法原理深入解析
2019/08/23 Python
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
上班上网检讨书
2014/01/29 职场文书
村委会换届选举方案
2014/05/03 职场文书
企业环保标语
2014/06/10 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
高老头读书笔记
2015/06/30 职场文书
教务处干事工作总结
2015/08/14 职场文书