jquery prependメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery prependメソッド

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

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

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

.prepend("要素やテキスト");

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

jquery

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

html

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

実行前

テキスト


実行後

テキスト


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

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

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

jquery

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

html

<p id="hoge2"><b>1つ目の文字 挿入しました</b></p>
<p id="hoge3">2つ目の文字</p>

実行前

1つ目の文字 挿入しました

2つ目の文字


実行後

1つ目の文字 挿入しました

2つ目の文字


わかりやすく書くとこうなっています
$(function() {
	$("p#hoge3").prepend("<b>1つ目の文字 挿入しました</b>");
});




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