JS中appendChild追加⼦节点⽆效的解决⽅法
JS中appendChild追加⼦节点⽆效
有这么⼀段代码：
let divs = ElementsByClassName('test');
let btn = ateElement('div');
for(let i=0;i<divs.length;i++){
divs[i].appendChild(btn);
}
表⾯上这段代码为每个 class属性为 test的元素添加⼀个 div⼦元素。
看起来没有什么问题，但是执⾏完之后却发现⼦元素并没有成功添加，也没有报错。
这其实是因为⼀个元素只能有⼀个⽗元素，上⾯这段代码试图将 btn添加到多个元素中。
⽽这与⼀个元素只能有⼀个⽗元素相⽭盾，⾃然就添加不了。
解决办法也很简单，就是将 btn的声明语句放到循环⾥⾯去，这样每次添加的 btn都是不同的元素，⾃然也就没有上⾯的问题了。
代码如下：
let divs = ElementsByClassName('test');
for(let i=0;i<divs.length;i++){
let btn = ateElement('div');
divs[i].appendChild(btn);
}
附：JS原⽣追加⼦节点
var fragment = ateDocumentFragment();
li = ateElement('li');
li.className = "xxx";
fragment.appendChild(li);
如上，需要先原⽣创建节点，节点内容成为了document的⼀部分才能appendchild，
如果直接appendchild（“<div></div>”）是不可以的，
因为appendChild(Node)这个⽅法⼀般是在指定元素节点的最后⼀个⼦节点之后添加节点
但如果Node是页⾯中的DOM对象，那么就不是添加节点了，就是直接Move节点。
appendChild你可以理解为移动⼀个元素。如果想复制⼀份过去，要事先clone
但是不管怎样，这个node需要先存在，
append()前⾯是要选择的对象，后⾯是要在对象内插⼊的元素内容
appendTo()前⾯是要插⼊的元素内容且为Jquery对象，⽽后⾯是要选择的对象
jquery在一个元素后追加标签实例：
$('#a').append('content');
$('<div>content</div>').appendTo($('#a'));
//注意appendTo前⾯⼀定要是Jquery对象。
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，如果有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。