連載
» 2010年02月12日 00時00分 公開

連載:jQuery逆引きリファレンス:第4回 要素の操作&ユーティリティ編 (3/19)

[山田祥寛(http://www.wings.msn.to/),著]



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 引数cで指定された要素セットに対してカレント要素を追加するには、appendTo/prependTo/insertBefore/insertAfterなどのメソッドを使います。

メソッド 概要
appendTo(c) カレント要素をコンテンツcの子要素末尾に追加
prependTo(c) カレント要素をコンテンツcの子要素先頭に追加
insertAfter(c) カレント要素をコンテンツcの後方に追加
insertBefore(c) カレント要素をコンテンツcの前方に追加
要素を追加するためのメソッド

 引数cには、追加先の要素を表すセレクタ式を指定します。

 append/prepend/after/beforeメソッドにも似ていますが、これらのメソッドでは、現在の要素セットが「追加先」となるのに対して、appendTo/prependTo/insertBefore/insertAfterメソッドでは、現在の要素セットは「追加する要素」となる点が異なります。

 以下の図とサンプルを、append/prepend/after/beforeメソッドの項とも比べて、理解を深めてください。

appendTo(c)/prependTo(c)/insertBefore(c)/insertAfter(c)メソッド

 以下のコードは、<div id="self">要素の子要素や前後に対して、それぞれ新規に要素を追加する例です。

<style type="text/css">

.self { background-color:Yellow; }
.sib { border: solid 1px Blue; margin: 5px }

</style>

  ……中略……

<script type="text/javascript">

$(function() {

  // 子要素先頭に追加
  $('<div class="sib">兄</div>').prependTo('div#self');

  // 子要素末尾に追加
  $('<div class="sib">弟</div>').appendTo('div#self');

  // 要素の前方に追加
  $('<div>伯父さん</div>').insertBefore('div#self');

  // 要素の後方に追加
  $('<div>叔父さん</div>').insertAfter('div#self');
});

</script>

  ……中略……

<div id="self" class="self">
  自分
</div>

リスト062 既存の要素の子要素/前後に対して新規要素を追加(AppendTo.htm)
このHTMLを実際にブラウザで開く


ブラウザで開く

リスト062の実行結果

 コードは違えど、Append.htmと同様の結果が得られることを確認してください。このようなケースでは、メソッド・チェーンを効果的に利用しているAppend.htmの記法がより好ましい書き方ですが、そのときどきで操作の基点に応じて使い分けるとよいでしょう。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。