beforeメソッド
beforeメソッドは、指定した要素の前にテキストを追加します。
同様の動作をするinsertBeforeメソッドもあります。
構文
要素の前にテキストを挿入する:
$(セレクタ).before(テキスト);
ユーザー定義関数によって返されたテキストが、 選択された要素の前に次のように追加されます:
$(セレクタ).before(function(セット内のインデックス));
関数を使用する別の方法として、 第2引数には要素の古いhtml値が渡されます:
$(セレクタ).before(function(セット内のインデックス, html文字列));
テキストは単なるプレーンテキストだけでなく、 DOM要素やjQueryオブジェクトにもできます。 この場合、それらの要素はHTMLコード内の元の位置から移動されます。
例
指定された段落の前にテキストを挿入してみましょう:
<p id="test">text</p>
$('#test').before('!!!');
HTMLコードは次のようになります:
!!!<p id="test">text</p>
例
指定された段落の前にタグ付きのテキストを挿入してみましょう:
<p id="test">text</p>
$('#test').before('<p>!!!</p>');
HTMLコードは次のようになります:
<p>!!!</p><p id="test">text</p>
例
ある段落を別の段落の上に配置してみましょう (つまり、段落を古い位置から切り取り、新しい位置に配置します):
<p id="p1">text1</p>
<p id="p2">text2</p>
$('#p2').before('#p1');
HTMLコードは次のようになります:
<p id="p2">text2</p>
<p id="p1">text1</p>
関連項目
-
metod
insertBefore,
指定した要素の前にテキストを追加します -
metodi
after,append,prepend,
ページの特定の場所にコンテンツを追加できます -
metod
clone,
選択された要素のコピーを作成します