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 相关文章推荐
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
详解JS模块导入导出
Dec 20 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
javascript随机变色实例代码
Oct 15 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+javascript制作带提示的验证码源码分享
2014/05/28 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
python 数据的清理行为实例详解
2017/07/12 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
python实现比较文件内容异同
2018/06/22 Python
python机器学习之神经网络实现
2018/10/13 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python3.7 sys模块的具体使用
2019/07/22 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
旷课检讨书2000字
2014/01/14 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
房屋公证委托书
2014/04/03 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle