before()

このエントリーをはてなブックマークに追加

before()は指定した要素の後ろにコンテンツを追加するメソッドです。

HTMLの挿入

次のようなHTMLがあったとしして、

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

次のようなメソッドを実行すると、

$('.inner').before('<p>Test</p>');

以下のようなHTMLに変換されます。

<div class="container">
  <h2>Greetings</h2>
  <p>Test</p>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
</div>

このようにbefore()は引数にHTML文字列を指定することで、指定した要素の後ろにHTMLを挿入します。

HTMLの移動

先程のHTMLに以下の命令を実行すると

$('.container').before($('h2'));

次のようなHTMLに変換されます。

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

before()の引数に、すでにHTML上に存在する要素のjQueryオブジェクトやDOMオブジェクトを指定することで指定した要素の後ろにHTMLが移動されます。

更にHTMLを変更

第2引数には更にHTMLを変更したい場合の処理を記述できます。

$('.inner').before('<p>Test</p>',"<p>foo</p>");
<div class="container">
  <h2>Greetings</h2>
  <p>Test</p>
  <p>foo</p>
  <div class="inner">Hello</div>
  <p>Test</p>
  <p>foo</p>
  <div class="inner">Goodbye</div>
</div>

sample

before()の第2引数には配列で2個以上の処理を記述することも可能です。

$('.inner').before('<p>Test</p>',["<p>foo1</p>","<p>foo2</p>"]);

sample

コールバック関数

引数に関数オブジェクトを指定することで、コールバック関数の返り値をbefore()の引数として利用できます。

$('.inner').before(function(){
   return "<p>foo1</p>";
});
jQuery 1.0.0での追加/変更

before()はjQuery 1.0で定義されたメソッドです。

jQuery 1.4.0での追加/変更

jQuery 1.4より引数に関数オブジェクトの指定が可能になりました。

参考URL

.before() | jQuery API Documentation

登録日 : 2013年06月23日 最終更新日 : 2013年6月23日

同じカテゴリー(Manipulation)のエントリー

検索

スポンサードリンク

バージョン

リファレンス