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 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
ExtJS Window 最小化的一种方法
Nov 18 Javascript
图像替换新技术 状态域方法
Jan 28 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
简单实现js上传文件功能
Aug 21 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
python避免死锁方法实例分析
2015/06/04 Python
Python+django实现文件下载
2016/01/17 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
Python 读写文件的操作代码
2018/09/20 Python
python绘制中国大陆人口热力图
2018/11/07 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
基于python调用psutil模块过程解析
2019/12/20 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
python缩进长度是否统一
2020/08/02 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
争当四好少年演讲稿
2014/09/13 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
2015年车间管理工作总结
2015/07/23 职场文书