JavaScript appendChildした要素を動的に逆順にするには

Question

appendChildで追加した要素を逆順にするにはどうしたらいいでしょうか

5回追加を押すと
0
1
2
3
4
と追加されます
リバースを押すと
4
3
2
1
0
となるようにするにはどうしたらいいでしょうか？

<style>
body,html{
height:100%;
}
</style>

<div id="output"></div>

<input type="button" value="追加" onclick="add()">

<input type="button" value="リバース" onclick="reverse()">


<script>
var i=0;
function add(){
div=document.createElement("div");
div.innerText=i;
div.style.width="100%";
div.style.height="10%";
div.style.background="red";
output.appendChild(div);
i++;
}
function reverse(){
}
</script>

Answer 1

どうぞ。

function reverse(){
  let flagment = document.createDocumentFragment();
  let element;
  while (element = output.firstChild) {
    flagment.insertBefore(element, flagment.firstChild);
  }
  output.appendChild(flagment);
}

Comments

[thiz]

IDつけずに動かせるとは思いませんでした
ありがとうございます

[thiz]

追加５回
↓
リバース
↓
追加３回
↓
リバースだと順番にならないんですが、これは解消できますか？

[itagagaki]

追加５回で

0
1
2
3
4

リバースで

4
3
2
1
0

ここに追加3回で

4
3
2
1
0
5
6
7

リバースで

7
6
5
0
1
2
3
4

合ってますよね。どこからが期待と違いますか？

[thiz]

ここに追加3回で

4
3
2
1
0
5
6
7

これは
7
6
5
4
3
2
1
0
になってリバースされ、順番通りに並んだという認識ですが間違いでしょうか？

[itagagaki]

add は output の最後に要素を1つ追加する仕様になっているので、

4
3
2
1
0

に、新しい要素 5 を add したら当然

4
3
2
1
0
5

になりますよね？