HTML、ＤＯＭ、属性偏

テキストを変更する - text()

タグ内の内容変更は、text()メソッドで行えます。

text()の引数には、変更した内容を記載します。

実行後は、引数に指定した値に書き換えられています。

◆jQuery
$(".text").text("変更後の内容です。");


◆変更前
<p class="text">変更前の内容</p>


◆変更後
<p class="text">変更後の内容</p>

指定した要素の内部を指定した要素に置換する - html()

html()メソッドで指定した要素の内部を指定した要素に置換することができます。

◆jQuery
$("p.text").html("<b>こんばんは！</b>");


◆HTML変更前
<p class="text">こんにちは</p>


◆HTML変更後
<p class="text"><b>こんばんは！</b></p>

HTML要素内の先頭にＨＴＭＬを追加する - prepend()

prepend()メソッドで指定した要素の先頭にHTMLを追加することができます。

◆jQuery
$("p.text").prepend("<strong>update!</strong>");


◆HTML変更前
<p class="text">こんにちは</p>


◆HTML変更後
<p class="text"><strong>update!</strong>こんにちは</p>

指定した要素の最後に要素を追加する - append()

append()メソッドで指定した要素の最後に要素を追加することができます。

◆jQuery
$("p.text").append("<strong>♪</strong>");


◆HTML変更前
<p class="text">こんにちは</p>


◆HTML変更後
<p class="text">こんにちは<strong>♪</strong></p>

指定した要素の前に要素を追加する - before()

before()メソッドで指定した要素の前に要素を追加することができます。

◆jQuery
$("p.text").before("<h3>挨拶</h3>");


◆HTML変更前
<p class="text">こんにちは</p>


◆HTML変更後
<h3>挨拶</h3>
<p class="text">こんにちは</p>

指定した要素の後に要素を追加する - after()

after()メソッドで指定した要素の後に要素を追加することができます。

◆jQuery
$("p.text").after("<h3>挨拶</h3>");


◆HTML変更前
<p class="text">こんにちは</p>


◆HTML変更後
<p class="text">こんにちは</p>
<h3>挨拶</h3>

エレメントの属性を変更する - attr()

attr()メソッドでエレメントの属性を変更することができます。

第一引数に属性名、第二引数に属性の値を指定します。

以下の例では、imgタグにsrc属性を付与しています。

◆jQuery
$(function() {
	$('#logo').attr('src', 'http://www.testdomain/logo.jpg');
});


◆HTML
<img id="logo"/>

------------------------------
作成日：2016年03月21日
更新日：2018年02月12日
------------------------------