jquery afterメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery after()メソッド

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

指定したHTML要素の後ろに挿入する

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

after("要素かテキスト");

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

jquery

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

html

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

実行前

テキスト


実行後

テキスト


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

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

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

jquery

$(function() {
	$("p#hoge3").after($("p#hoge2").text());
});

html

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

実行前

1行目の文字

2行目の文字


実行後

1行目の文字

2行目の文字







(C)2012 ホームページ作成無料