Javascriptで行を反対にする

Question

<div id="reverse">
<span>
a
</span>
<span>
b
</span>
<span>
c
</span>
<span>
d
</span>
</div>

このようなソースで、

d
c
b
a

と表示させる、Javascriptのコードがわかりません。
教えてください。

Comments

[退会済みユーザー]

トリガーは何？

[12_345678_90]

データをphpで書き込みさせ、それを新しいのを上にして表示させたかったのですが、javascriptはあまりわからないので投稿しました。

Answer 1

<div id="reverse">
<span>
a
</span>
<span>
b
</span>
<span>
c
</span>
<span>
d
</span>
</div>
<script>
'use strict';
{
  const spanList = document.querySelectorAll('#reverse>span'), df = document.createDocumentFragment();
  let i = spanList.length;

  while (i--) {
    df.appendChild(spanList[i]);
  }

  document.getElementById('reverse').appendChild(df);
}
</script>

Re: 12_345678_90 さん

Comments

[12_345678_90]

ありがとうございます。成功しました。

Answer 2

てきとーにやるならこんなかんじじゃね

let els = Array.from(document.querySelectorAll("#reverse > span")).reverse();
document.getElementById("reverse").innerHTML = "";
(els).forEach((e) => {
  document.getElementById("reverse").innerHTML += e.innerHTML;
});

https://codepen.io/anon/pen/xzvExw

1行でかこうとがんばるとこんなかんじか

Array.from(document.getElementById("reverse").childNodes).reverse().forEach((e) => {
  document.getElementById("reverse").insertBefore(e, document.getElementById("reverse").firshChild);
});

Answer 3

こんにちは。

参考までに、JQuery と Array.prototype.reverse()を使うと、以下のように書けます。

$('#reverse').html($('span').toArray().reverse());

以下は、上記のデモです。

https://jsfiddle.net/jun68ykt/30w56xa1/16/

上記の jsFiddle の右下の Firebug を開き、HTMLタブを表示させると、<span>が
逆順になっていることが、以下のように確認できます。

以上、参考になれば幸いです。

Comments

[12_345678_90]

ありがとうございます。参考にさせていただきます。