jQueryのprependToの代わりを純粋なJavascriptで作ってみる!Javascriptの勉強

jQueryを純粋なJavascriptに書き換えて遊んでいます。今日はjQueryのprependToを純粋なJavascriptで書き換えてみました。

jQuery prependToとは

prependToを使うと要素を他の要素の先頭に持って行くことができます。

slideで使われているのを見かけて興味が湧きました。スライドを作るのは面倒なので、以下のjQueryを見本として作成しました。

See the Pen prependTo Test by Nakamoto (@programmerlife) on CodePen.

ボタンを押すと一番下(last-child)のliタグが先頭に移動します。

JavascriptでprependToっぽい動きをさせる

以下codepenで作成コードです。querySelectorAll()とappendChildを使って対応することができました。

See the Pen Js instead of prependTo by Nakamoto (@programmerlife) on CodePen.

querySelectorAll()でliタグの一覧を取得します。

document.querySelectorAll("#prependToJs li");

querySelectorAll()で取得した要素の先頭をappendChildで追加します。

lists.appendChild(listAll[0]);

少し混乱しましたが prependTo は最後の要素を先頭に持ってくるのに対し、appendChild では最初の要素を末尾に持っていきます。

おわり

やっぱりJavascriptで書く方が行数が増えますね。とはいえquerySelectorAllのおかげでそこまで大変でもなかったですね。思ったより簡単でした。prependToの動きを理解する方が時間がかかってしまった。