javascriptのinsertBeforeを利用して、HTMLの要素を移動させる(要素順の入れ替え)

結論

ある親となるHTML要素に、すでに存在している子要素をinsertBeforeで挿入しようします。すると子要素は関数で指定した場所に移動します。

insertBefore関数

.js

(親).insertBefore(newNode, referenceNode)

は、ある親が持つreferenceNodeの前に、newNodeを挿入する関数です。¹HTML要素を追加する目的で使用する想定だと思います。しかし、下記の2つの仕様を持っているため、HTML要素を移動させるときにも利用できます。

• newNodeに「既に存在する要素」を指定した場合、指定された要素はreferenceNodeの前に移動される。
• referenceNodeがnullの場合、newNodeは末尾に挿入・移動される。

サンプルコードで実際の挙動を確認いただけると幸いです。

サンプルコード

See the Pen javascriptで、htmlの要素順を入れ替える by kabuto64425 (@kabuto64425) on CodePen.

以上です。

参考

1. 正確性を欠くかもしれませんが、ノードはjavascriptで扱う「HTMLの要素」という考えでいいかと思います。 ↩