appendChild(img) の前に if 文で li.classList.add('current'); をいれるのはどうしてでしょうか?

if ブロックで current クラスのついた li を作成してから、それを最後の appendChild で .thumbnails の子要素として追加しています。
2021年9月29日
ユーザー
images.forEach((image, index) => {
    const img = document.createElement('img');
    img.src = image;

→ ① forEach で <img src=" "> を 0 ~ 7 番目の 8 つつくりました。

    const li = document.createElement('li');

→ ② li 要素をつくりました。li を定数にしただけで上の forEach とは関係ないように思います。

    if (index === currentIndex) {
      li.classList.add('current');
    }

→ ③ index が 0( img が 0 番目)のとき、li の 0 番目に current クラスをつける。
ここではまだ li が img の親要素だと宣言していないのにどうして img の 0 番目が li の 0 番目と認識するのでしょうか?
この下で appendchild で宣言してるので、その後にこの if 文を持ってきたほうがいいのかと思い移動させてみましたらうまくいってました。同じ forEach 文の中では人が読みやすくする必要はあるが順番はどうでもいいのでしょうか?
それでこの if 文を const img = document.createElement('img'); の上にもってきましたらだめでした。やはり順番があるみたいですね。
ということは①で一度に <img src=" "> を 8 つつくるのではなく 1 つつくり下までいき、次の <img をつくるのかなと考えました。
それでもやはりまだ li が img の親要素だと宣言していないのにどうして img の 0 番目が li の 0 番目と認識するのかがわかりません。

    li.appendChild(img);
    document.querySelector('.thumbnails').appendChild(li);

→ ④ li の子要素は img 、thumbnails の子要素は li

*同じような質問がありましたが、回答を読んでもよくわかりませんでした。

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(10)