beforeメソッド

beforeメソッドは、指定した要素の前にテキストを追加します。 同様の動作をするinsertBeforeメソッドもあります。

構文

要素の前にテキストを挿入する：

javascript$(セレクタ).before(テキスト);

ユーザー定義関数によって返されたテキストが、 選択された要素の前に次のように追加されます：

javascript$(セレクタ).before(function(セット内のインデックス));

関数を使用する別の方法として、 第2引数には要素の古いhtml値が渡されます：

javascript$(セレクタ).before(function(セット内のインデックス, html文字列));

テキストは単なるプレーンテキストだけでなく、 DOM要素やjQueryオブジェクトにもできます。 この場合、それらの要素はHTMLコード内の元の位置から移動されます。

例

指定された段落の前にテキストを挿入してみましょう：

html<p id="test">text</p>

javascript$('#test').before('!!!');

HTMLコードは次のようになります：

html!!!<p id="test">text</p>

例

指定された段落の前にタグ付きのテキストを挿入してみましょう：

html<p id="test">text</p>

javascript$('#test').before('<p>!!!</p>');

HTMLコードは次のようになります：

html<p>!!!</p><p id="test">text</p>

例

ある段落を別の段落の上に配置してみましょう （つまり、段落を古い位置から切り取り、新しい位置に配置します）：

html<p id="p1">text1</p>
<p id="p2">text2</p>

javascript$('#p2').before('#p1');

HTMLコードは次のようになります：

html<p id="p2">text2</p>
<p id="p1">text1</p>

関連項目