jquery appendメソッド

TOPページに戻る > jquery入門

jquery append()メソッド

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

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

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

append("テキスト");

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

jquery

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

html

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

実行前

テキスト

実行後

テキスト

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

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

append(jqueryオブジェクト);

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

jquery

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

html

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

実行前

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

2行目の文字

実行後

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

2行目の文字

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

$(function() {
	$("p#hoge3").append("1行目の文字<b>1つ目の文字　挿入しました</b>");
});