JavaScript中 appendChild追加子节点无效的解决办法
JavaScript中 appendChild追加子节点无效的解决办法
渔父歌
发布于 2018-09-28 16:02:55
发布于 2018-09-28 16:02:55
有这么一段代码：
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);
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.09.01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读