JavaScript中 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);
}