jquery beforeメソッド

TOPページに戻る > jquery入門

jquery before()メソッド

beforeメソッドを使ってセレクタで指定した要素の前に挿入します
テキストだけでなく要素も挿入できます

指定した要素の前に挿入する

指定した要素の前に挿入するメソッド

before("テキスト");

この場合は、id名がhogeのp要素の内容の前に指定したテキストと要素を挿入します
引数がテキストと要素の場合はダブルクォークションで囲みます

jquery

$(function() {
	$("p#hoge").before("<b>挿入しました</b>");
});

html

<p id="hoge">テキスト</p>

実行前

テキスト

実行後

テキスト

jqueryオブジェクトを挿入する

要素やテキストだけでなくjqueryオブジェクトも挿入できます
オブジェクトで指定する場合ダブルクォークションなしで記述します

before(jqueryオブジェクト);

1行目の要素の前に2行目の内容を挿入します
$("p#hoge3").html()で2行目の指定した要素の内容を取得しています
$("p#hoge2").before()の引数に2行目で取得したjqueryオブジェクトを入れると1行目の前に2行目の内容が挿入されます

jquery

$(function() {
	$("p#hoge2").before($("p#hoge3").html());
});

html

<p id="hoge2">1行目の文字</p>
<p id="hoge3"><b>2行目の文字</b></p>

実行前

1行目の文字

2行目の文字

実行後

1行目の文字

2行目の文字

わかりやすく書くとこうなっています

$(function() {
	$("p#hoge2").before("<b>2行目の文字</b>");
});