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の子要素を追加しています。

問題ないように見えますが、実行してみると、子要素がうまく追加されず、エラーも報告されていないことがわかります。

これは実は、要素が親を1つしか持てないためで、上のコードは複数の要素に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);
}