afterbegin afterend にリストを挿入すると，逆順になってしまいます

Question

前提・実現したいこと

リストを正順にしたいです。

発生している問題・エラーメッセージ

javascriptの勉強にてinsertAdjacementHTMLを用いて<li>を挿入するという行程があったのですが，afterbegin,afterendに挿入すると，なぜかリストが逆順になって表記されてしまいます。
afterbeginですと上から順に，牛乳を買う，勉強会申し込み，データ整理，デザインカンプ作成，ファミコン，テレビ
といった具合です。
エラーメッセージはありません。

該当のソースコード

JavaScript

<section> <h1>やることリスト</h1> <ul id="list"> <li>ファミコン</li> <li>テレビ</li> </ul> </section>

let todo=['デザインカンプ作成','データ整理','勉強会申し込み','牛乳を買う'];
for(let item of todo){
const li =<li>${item}</li>;
document.getElementById('list').insertAdjacentHTML('afterbegin',li);
}

試したこと

色々と検索しましたが，有益な情報は得られませんでした。

補足情報（FW/ツールのバージョンなど）

Answer 1

afterbegin,afterendに挿入すると，なぜかリストが逆順になって表記されてしまいます。

そうなる場所に挿入しているだけ、という話です（MDN）。

• afterendでは、</ul>の直後に挿入されていきます。HTMLとしても正当ではありません。
• afterbeginでは、<ul>の直後に挿入されます。

やりたいことは、おそらくbeforeendかと思います。

Comments

[coffee_milk]

すみません，当方頭が悪くて申し訳ないのですが，afterbeginではすでにある子要素の上に<li>が積みあがっていくというイメージなのでしょうか？

[maisumakun]

そのとおりです。<ul>と1つ目の<li>の間に新しい<li>を挿入するので、後から挿入されるもののほうが上に来ます。

[coffee_milk]

ありがとうございます！助かりました。

Answer 2

Element#insertAdjacentHTML - Mozilla

'afterbegin'

element 内部の、最初の子要素の前に挿入

↑「最初の子要素の前に挿入」を繰り返しているから、あとから「insertAdjacentHTML」した要素が上のほうに出るのでは？

Comments

[coffee_milk]

ありがとうございます！助かりました。