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 去除数组的重复元素
May 04 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
React组件的三种写法总结
Jan 12 Javascript
JavaScript运行原理分析
Feb 09 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
js获取图片的base64编码并压缩
Dec 05 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
mysql+php分页类(已测)
2008/03/31 PHP
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
DHTML 中的绝对定位
2006/11/26 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
js实现幻灯片轮播图
2020/08/14 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
python中global与nonlocal比较
2014/11/21 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
大学生活学习的自我评价
2013/12/03 职场文书
初三物理教学反思
2014/01/21 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
倡议书的写法
2014/08/30 职场文书
人代会简报
2015/07/21 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android