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 11 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
拖动时防止选中
Feb 03 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 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写的简易聊天室代码
2011/06/04 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
php计算十二星座的函数代码
2012/08/21 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
js滚动条回到顶部的代码
2011/12/06 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
JavaScript制作简单的框选图表
2017/05/15 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
python实现文本文件合并
2015/12/29 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
上学迟到的检讨书
2014/01/11 职场文书
九年级历史教学反思
2014/01/27 职场文书
元旦晚会活动总结
2014/07/09 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL
i7 6700处理器相当于i5几代
2022/04/19 数码科技