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の動きを理解する方が時間がかかってしまった。
