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脚本编程解决考试分数统计问题
Oct 18 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 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调用数据库的存贮过程
2006/10/09 PHP
如何在PHP中进行身份认证
2006/10/09 PHP
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
九种原生js动画效果
2015/11/11 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
使用python3.5仿微软记事本notepad
2016/06/15 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Python对象与引用的介绍
2019/01/24 Python
Python跳出多重循环的方法示例
2019/07/03 Python
一道Delphi上机题
2012/06/04 面试题
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
经理职责范文
2013/11/08 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
幼师求职自荐信
2015/03/26 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android