htmlメソッド
htmlメソッドは、要素のテキストを変更したり、
タグを含むテキストを取得したりすることができます。
構文
テキストの取得:
$(セレクタ).html();
テキストの変更:
$(セレクタ).html(新しいテキスト);
詳細
htmlメソッドは、セット内の各要素に対して指定された
関数を適用することができます。
この場合、関数の最初のパラメータはセット内の要素のインデックスを受け取り、
2番目のパラメータは要素の現在のテキストを受け取ります:
$(セレクタ).html(function(セット内のインデックス, 要素の現在のテキスト));
関数内の変数名は任意です。
たとえば、最初のパラメータにindexという名前を付けた場合、
関数内では、その関数が現在処理している要素のセット内のインデックスが
index変数で利用可能になります。
同様に、2番目のパラメータに、たとえばvalueという名前を付けた場合、
関数内では、その関数が現在処理している要素のテキストが
value変数で利用可能になります:
$(セレクタ).html(function(index, value) {
// ここでは変数indexとvalueが利用可能
});
各要素のテキストは、その要素に対して関数が返す値に変更されます。
例
段落の内容を画面に表示してみましょう:
<p id="test">テキスト</p>
let text = $('#test').html();
alert(text);
例
段落の内容を変更してみましょう:
<p id="test">テキスト1</p>
$('#test').html('テキスト2');
HTMLコードは次のようになります:
<p id="test">テキスト2</p>
例
段落の内容をタグ付きのテキストに変更してみましょう:
<p id="test">テキスト1</p>
$('#test').html('<span>テキスト2</span>');
HTMLコードは次のようになります:
<p id="test"><span>テキスト2</span></p>
例
各段落の末尾に、セット内での順序番号を追加してみましょう:
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
HTMLコードは次のようになります:
<p>テキスト 0</p>
<p>テキスト 1</p>
<p>テキスト 2</p>
