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 相关文章推荐
asp 取文本框名称代码
Dec 02 Javascript
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 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
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
培养自己的php编码规范
2015/09/28 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
Jquery ui css framework
2010/06/28 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
vue中的inject学习教程
2019/04/24 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
python实现无证书加密解密实例
2014/10/27 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
JSF界面控制层技术
2013/06/17 面试题
军神教学反思
2014/02/04 职场文书
《雾凇》教学反思
2014/02/17 职场文书
百年校庆节目主持词
2014/03/27 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
学术会议邀请函
2015/01/30 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python
vue3不同环境下实现配置代理
2022/05/25 Vue.js