jquery htmlメソッド

TOPページに戻る > jquery入門

jquery htmlメソッド

jqueryではセレクタで取得した要素に対してHTMLを操作できます
htmlメソッドを使ってセレクタで指定した要素の内容を取得したり、変更したりできます。
取得した内容にはHTML要素も含まれます

htmlを取得

指定した要素から内容を取得する方法

$("セレクタ").html();

この場合は、id名がhogeの要素の内容を取得します
取得された内容には要素も含まれます

$("#hoge").html();

htmlの変更

html()の引数に文字や要素を入れるとセレクタで指定した要素の内容を変更できます
$("#hoge").html();左のような取得したオブジェクトを直接指定する場合ダブルクォークションなしで記述します

$("セレクタ").html($("#hoge").html());

テキストの場合はダブルクォークションでテキストを囲います

$("セレクタ").html("要素やテキスト");

二つ目の内容を一つ目の内容に変更してみます
$("#hoge").html();で1行目の指定した要素の内容を取得しています
取得した内容を変数fooに代入
$("#hoge2").html(foo);引数の中に1行目で取得した内容を入れると2行目の要素の内容が変更されます
$("#hoge2").html("1つ目の文字　<b>変更しました！</b>");　わかりやすく書くと左のようになっています

jquery

$(function() {
　　var foo = $("#hoge").html();
	$("#hoge2").html(foo);
});

html

<p id="hoge">1つ目の文字　<b>変更しました！</b></p>
<p id="hoge2">2つ目の文字　変更なし</p>

実行前

1つ目の文字　変更しました！

2つ目の文字　変更なし

実行する