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(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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 array_push 数组函数
2009/12/26 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
javascript常用的设计模式
2017/02/09 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
企划专员岗位职责
2013/12/09 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
文艺演出主持词
2015/07/01 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers