要素の順番を入れ替える方法

Question

###■やりたいこと
次のHTMLがあるのですが、事情があって書き換えられず、javascriptで順番を変更できないかと思っています。

▼▼HTMLはこうなっている▼▼

<div class="neko">ネコ</div>
<div class="inu">イヌ</div>
<div class="hamusuta">ハムスター</div>

▼▼javascriptでこうしたい▼▼

<div class="neko">ネコ</div>
<div class="hamusuta">ハムスター</div>
<div class="inu">イヌ</div>

###■ダメだったこと
ただし、

・CSSのposition:absolute;で移動させる
・CSSのdisplay:flex;でorderをかける
・HTMLに番号idをつけてjavascriptでソートする

という方法ではなく、

・javascriptで指定class（inu）を、別の指定class（hamusuta）の後に持っていく

という方法を探しているのですけれど、、そのようなことは可能でしょうか？

ご教示いただけましたら幸いです。
よろしくお願いいたします。m(_ _)m

Answer 1

同じクラスの要素が複数ある場合は想定通りとならないかもしれません。

const inu = document.getElementsByClassName('inu')[0];
const ham = document.getElementsByClassName('hamusuta')[0];
const oya = inu.parentNode;
oya.insertBefore(ham, inu);

Comments

[退会済みユーザー]

なるほど。入れ違いでベストアンサーは決めてしまいましたけれど、こちらもありがとうございます。

Answer 2

なぜか上がっていたので Vanilla JS を。
入れ替えの意図が不明なのでテキストノードも変わらないようにしています。

const swap = function(node1, node2) {
  const parentNode = node2.parentNode;
  const referenceNode = node2.nextSibling;
  node1.after(node2);
  parentNode.insertBefore(node1, referenceNode);
};

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/after

Answer 3

解決済みですが、汎用的な方法はこの３つに共通のクラスを指定して配列に入れてあげてそこで順番を入れ替えてアペンドするのも良いかと思います。

Comments

[退会済みユーザー]

おはようございます。

ありがとうございます。解決済みとはいえ、ご自身のよりよいと思われた方法を教えてくださる優しさには感謝です。

よい一日を♪

Answer 4

これでどうでしょう？

$(function(){
	$('.hamusuta').after($('.inu'));
})

Comments

[退会済みユーザー]

いつもありがとうございます。
あら、アッサリですね！
afterやappendでクラスを挿入するというのは以前やったのですが…そうか。クラスを挿入できるから、位置も移動できるんですもんね。
すごく難しく考えていました。。

[recal]

jqueryじゃないですか