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

今回からは、Webサイト制作のコーディングにおいて用いるjQueryの基本的なメソッドの中でも、要素の移動や挿入(追加)する機能をもつメソッドをまとめていく。

要素を移動・挿入(追加)する機能をもつ基本的なメソッド
  • append()メソッド:指定した要素内(中身)の最後に挿入する
  • appendTo()メソッド:指定した要素内(中身)の最後に挿入する
  • prepend()メソッド:指定した要素内(中身)の先頭に挿入する
  • prependTo()メソッド:指定した要素内(中身)の先頭に挿入する
  • before()メソッド:指定した要素の前に挿入する
  • after()メソッド:指定した要素の後に挿入する
記述例

共通した記述の仕方は以下の通り。

$("要素1").メソッド($("要素2"));

注意する点は、指定する2つの要素はどちらもjQueryオブジェクト化する必要があるということ。

(先に書く)要素1に対して、(後に書く)要素2を操作するというのが基本となる。

ただし、メソッドの最後に「To」がつくappendTo()メソッドとprependTo()メソッドのみ2つの要素の指定位置が逆になる。

以下で、各メソッドの挙動を確認していく。

append()メソッド

複数の要素をまとめてappendすることが可能で、その場合は下記のように書く。

$("要素1").メソッド($("要素2"),$("要素3"),$("要素4"),…);

メソッドの括弧()内にコンマで区切って追加していく。

ちなみに複数の要素に対して、同じ要素をappendできるのかを試したところ、IEFirefoxで結果が異なったため、そういった指定は不可と考えられる。
以下、NGな指定方法。

($("要素1"),$("要素2")).メソッド($("要素3")); /* これはNG */

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>append()メソッド</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').append($('#dtwo'));
 $('#done').append($('.pone'),$('.pfour'),$('.pthree'));
 $('#dtwo').append($('#dthree p'));
 $('#done').append($('.litwo'));
});
</script>
</body>
</html>

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

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

以下、挙動確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>appendTo()メソッド</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').appendTo($('#done'));
 $('#dthree p').appendTo($('#dtwo'));
 $('.litwo').appendTo($('#done'));
});
</script>
</body>
</html>

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

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

append()メソッドとappendTo()メソッドの違い

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

以下、検証コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>append()メソッドとappendTo()メソッドの違い</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')).appendTo($('#done')); /* これはNG */

});
</script>
</body>
</html>

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

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

以下、検証コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>append()メソッドとappendTo()メソッドの違い</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').append($('#dtwo .pone'));
 $('#done').append('#dtwo .ptwo'); /* これはNG */
 $('#dfour .pone').appendTo($('#dthree'));
 $('#dfour .ptwo').appendTo('#dthree');
});
</script>
</body>
</html>

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

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

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

思ってたより長くなったので、残りのメソッドについては次回以降で確認していく。