Webサイト制作におけるjQueryの基本的なメソッド４ - prepend()とprependTo()

ｊQuery

前回に引き続き、今回はprepend()メソッドとprependTo()メソッドについて確認する。

機能の概要は既に（前回）書いたので割愛する。

挿入される位置が異なる以外は、append()メソッドおよびappendTo()メソッドと同じ機能なので、前回の記事を見て頂いた人は特に見る必要はないと思われる。

prepend()メソッド

append()メソッドと同様に、複数の要素をまとめてprependすることができる。

以下、基本挙動確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>prepend()メソッド</title>
<style>
body, div, p {
  margin: 10px;
  padding: 0;
}
#done {
  background: #0F0;
}
#dtwo {
  width: 200px;
  background: #0FF;
}
#dthree {
  width: 150px;
  background: #F0F;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="done">
　<p>done_p</p>
　<p>done_p</p>
</div>

<div id="dtwo">
　<p>dtwo_p</p>
</div>

<div id="dthree">
　<p class="pone">dthree_pone</p>
　<p class="ptwo">dthree_ptwo</p>
　<p class="pthree">dthree_pthree</p>
　<ul>
　　<li class="lione">dthree_ul_lione</li>
　　<li class="litwo">dthree_ul_litwo</li>
　</ul>
　<div>
　　<p>dthree_div_p</p>
　</div>
　<p class="pfour">dthree_pfour</p>
</div>

<script>
$(function(){
　$('#done').prepend($('#dtwo'));
　$('#done').prepend($('.pone'),$('.pfour'),$('.pthree'));
　$('#dtwo').prepend($('#dthree p'));
　$('#done').prepend($('.litwo'));
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示
結果から、以下のことが分かる。

  • 複数の要素をまとめて移動させる場合、prepend()メソッドの括弧内に書いた順に移動する（移動後、その順番で並ぶ）※上記例の「.pfour」、「.pthree」に対する結果参照
  • もとは兄弟関係でないものでも、同じ条件で抽出されたものは、移動後は兄弟扱いになる　※上記例の「#dthree p」に対する結果参照
  • このような指定の仕方が正しいのかどうかは不明だが、「ul li」の「li」のみを移動させた場合でも、処理はされる（「li」が単独で移動する）※上記例の「.litwo」に対する結果参照
prependTo()メソッド

以下、挙動確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>prependTo()メソッド</title>
<style>
body, div, p {
　margin: 10px;
　padding: 0;
}
#done {
　background:#0F0;
}
#dtwo {
　width: 200px;
　background: #0FF;
}
#dthree {
　width: 150px;
　background: #F0F;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="done">
　<p>done_p</p>
　<p>done_p</p>
</div>

<div id="dtwo">
　<p>dtwo_p</p>
</div>

<div id="dthree">
　<p class="pone">dthree_pone</p>
　<p class="ptwo">dthree_ptwo</p>
　<p class="pthree">dthree_pthree</p>
　<ul>
　　<li class="lione">dthree_ul_lione</li>
　　<li class="litwo">dthree_ul_litwo</li>
　</ul>
　<div>
　　<p>dthree_div_p</p>
　</div>
　<p class="pfour">dthree_pfour</p>
</div>

<script>
$(function(){
　$('#dtwo').prependTo($('#done'));
　$('#dthree p').prependTo($('#dtwo'));
　$('.litwo').prependTo($('#done'));
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示
prepend()メソッドと結果は同じであることが分かる（複数要素をまとめてprependする方法は以下で検証）。

以下でprepend()メソッドとprependTo()メソッドの違いを検証してみる。

prepend()メソッドとprependTo()メソッドの違い

prependTo()メソッドを用いて、複数の要素をまとめてprependしてみる。

以下、検証コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>prepend()メソッドとprependTo()メソッドの違い</title>
<style>
body, div, p {
　margin: 10px;
　padding: 0;
}
#done {
　background:#0F0;
}
#dtwo {
　width: 200px;
　background: #0FF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="done">
　<p>done_p</p>
</div>

<div id="dtwo">
　<p class="pone">dtwo_pone</p>
　<p class="ptwo">dtwo_ptwo</p>
　<p class="pthree">dtwo_pthree</p>
</div>

<script>
$(function(){
　($('.pone'),$('.ptwo'),$('.pthree')).prependTo($('#done'));
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示
結果から、三つ指定したうちの最後の「.pthree」のみが移動していることが分かる。
よってprependTo()メソッドを用いる場合は、複数の要素をまとめてprependすることはできないと考えられる。

また、prependTo()メソッドの場合は、括弧内にjQueryオブジェクト化していない状態でセレクタを指定しても正しく処理されるということなので、prepend()メソッドの場合と比較して検証してみる。

以下、検証コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>prepend()メソッドとprependTo()メソッドの違い</title>
<style>
body, div, p {
　margin: 10px;
　padding: 0;
}
#done, #dthree {
　background:#0F0;
}
#dtwo, #dfour {
　width: 200px;
　background: #0FF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="done">
　<p>done_p</p>
</div>

<div id="dtwo">
　<p class="pone">dtwo_pone</p>
　<p class="ptwo">dtwo_ptwo</p>
　<p class="pthree">dtwo_pthree</p>
</div>

<div id="dthree">
　<p>dthree_p</p>
</div>

<div id="dfour">
　<p class="pone">dfour_pone</p>
　<p class="ptwo">dfour_ptwo</p>
　<p class="pthree">dfour_pthree</p>
</div>

<script>
$(function(){
　$('#done').prepend($('#dtwo .pone'));
　$('#done').prepend('#dtwo .ptwo');
　$('#dfour .pone').prependTo($('#dthree'));
　$('#dfour .ptwo').prependTo('#dthree');
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示
一見正しく処理されているようにも見えるが、prepend()の場合はjQueryオブジェクト化していない状態でセレクタを指定すると処理がおかしくなっていることが分かる（セレクタ名のみが移動してテキストとして表示されている。移動元にも移動したはずのものが残っている）。
一方、prependTo()メソッドの方は、正しく処理されていることが分かる。

以上の検証結果から、現状で確認できた（他にもあるかもしれない）prepend()とprependTo()の違いをまとめると下記のようになる。

  • prepend()メソッドでは複数の要素をまとめてprependできるが、prependTo()メソッドではできない（らしい）
  • prependTo()メソッドでは（「To」の後の）括弧内ではjQueryオブジェクト化するための「$()」を省略することができるが、prepend()メソッドではできない