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 中对象的继承〔转贴〕
Jan 22 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
vue实现城市列表选择功能
Jul 16 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
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
destoon数据库表说明汇总
2014/07/15 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
33种Javascript 表格排序控件收集
2009/12/03 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
python图像处理之反色实现方法
2015/05/30 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
python实现反转部分单向链表
2018/09/27 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
印尼旅游网站:via
2017/11/12 全球购物
高三自我评价
2014/02/01 职场文书
大四自我鉴定
2014/02/08 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
2016年教代会开幕词
2016/03/04 职场文书