こんにちは、ライターのマサトです！
今回は、jQueryでHTML要素を取得したり追加・書き換えを行える「html()」メソッドについて学習をしていきましょう！
この記事では、
などの使い方に関して解説していきます。
この記事で、html()メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「html()」とは？
それでは、まず最初に「html()」メソッドの基本的な知識から学習を進めていきましょう！
「html()」を使うと、任意のHTML要素を取得したり意図的に要素を追加・書き換えをすることが出来ます。
例えば、次のようなp要素が1つあるとします。
<p>こんにちは！</p>
「html()」を使えば、このp要素にあるテキスト文字を取得したりp要素をa要素に変えてしまうことも可能です！
また、1つだけのp要素を3つに増やしたり、完全に削除することも簡単に実現できる便利なメソッドなのです。
本記事では、この「html()」メソッドについて基本から応用例まで詳しく解説していきますのでぜひ参考にしてみてください！
文字を出力する
まずは、「html()」メソッドを使ってブラウザ上に簡単な文字列を出力してみましょう！
「html()」の基本的な書き方としては、【 対象要素.html( 文字列 ) 】のように引数へ出力したい文字列を指定すればOKです。
次のサンプル例を見てください！
$('body').html('こんにちは！');
この例では、body要素内に文字列を出力しています。
実行すると、ブラウザの画面上に「こんにちは！」という文字列が表示されます。このように引数へ出力したい文字列を指定すれば簡単に特定の文字列を出力出来るわけです。
さらに、HTMLコンテンツを指定することも可能です！
$('body').html('<h1>こんにちは！</h1>');
このように、引数へ「h1タグ」を記述することでh1要素を表示することもできます。
これにより、任意のHTMLコンテンツを追加することが出来るので大変便利なメソッドになります。
HTML要素を取得する
次に、任意のHTML要素を取得してみましょう！
「html()」を使って要素を取得する場合は、【 対象要素.html() 】のように引数へ何も指定する必要はありません。
次のサンプル例を見てください！
<body>
<p>こんにちは</p>
<a href="#">サンプルリンク</a>
<script>
const result1 = $('p').html();
const result2 = $('a').html();
console.log( result1 );
console.log( result2 );
</script>
</body>
実行結果
こんにちは サンプルリンク
この例では、p要素とa要素が1つずつ配置されていますね。それぞれの要素を対象にして、「html()」を実行することで簡単に要素を取得することができるわけです。
実行例を見ると、p要素・a要素それぞれのテキスト文字が取得できているのが分かります！このように「html()」の引数を指定しなければ要素の取得ができ、指定すれば要素の追加・書き換えができるわけです。
これは「html()」の基本的なポイントになるので、忘れないようにしておきましょう！
HTML要素を書き換える
今度は、すでに配置されているHTML要素を別の要素に書き換えてみましょう！この書き換えをするには、まず「html()」の重要な特性について知っておく必要があります。
それは、対象の要素に「html()」を実行すると中身がすべて上書きされるという性質です！
分かりやすいように、次のコード例を見てください。
<body>
<div>
<h1>タイトル</h1>
<p>サンプルテキスト</p>
<a href="#">リンク</a>
</div>
<script>
$('div').html('<p>こんにちは</p>');
</script>
</body>
実行後のHTML
<div>
<p>こんにちは</p>
</div>
この例では、div要素内に「h1要素・p要素・a要素」がそれぞれ配置されていますよね？
この状態でdiv要素に対して「html(‘<p>こんにちは</p>’)」と記述しています。すると、実行後のHTMLを見るとdiv要素内がhtml()で指定したp要素に入れ替わっているのが分かりますね。
つまり、元々あった要素は上書きされて、新しくhtm()で指定したp要素に書き換わったというわけです。このように、上書きされることで自分の好きなHTML要素を配置できるのが「html()」の特徴になります。
HTML要素を追加する
「html()」を使った要素の書き換え方が分かれば、好きな要素を追加する方法も簡単ですね。なぜなら、追加したい要素をhtml()の引数に指定すれば良いからです。ただし、上書きされるという性質を忘れないように指定する必要があります。
次のサンプル例を見てください！
<body>
<p>リンクはコチラから</p>
<script>
$('p').html('<p>リンクは<a href="#">コチラ</a>から</p>');
</script>
</body>
実行後のHTML
<p>リンクは<a href="#">コチラ</a>から</p>
この例では、単純なp要素が配置されています。
このp要素の文字列で「コチラ」という部分にリンク要素を追加しているのが分かりますね。ポイントは、p要素に対して「html(‘<p>リンクは<a href=”#”>コチラ</a>から</p>’)」のように元のp要素も記述している点です。
なぜなら、html()は中身を上書きするので元々あった要素も一緒に記述しないと要素を追加したことにならないからです。初心者の方は間違いやすいポイントなので、よく覚えておきましょう！
関数による書き換えについて
これまでは「html()」の引数に任意の文字列やHTML要素を記述する方法を学習してきました。
しかし、実は引数に「関数」を指定することもできます！この関数を活用することで、より複雑な要素の書き換えが実現できるのでご紹介しておきます。
一般的な記述方法としては、【 対象要素.html( function( index, element ) { } ) 】のように引数へ関数を指定します。
関数の「index」「element」の部分には、次のような情報が格納されています。
これらの内容を簡単なサンプル例で見てみましょう！
<body>
<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
<script>
$('li').html( function( index, element ) {
if( index === 1 ) {
return element + 'です！';
}
})
</script>
</body>
実行後のHTML
<ul>
<li>項目１</li>
<li>項目２です！</li>
<li>項目３</li>
</ul>
この例では、3つのli要素を持つリストが配置されています。
このli要素を対象にして関数を実行しているのが分かりますね。「index」にはli要素のインデックス番号が格納されるので、0〜2までの数値が順番に入ることになります。
「element」にはそれぞれのli要素が格納されているわけです。「if( index === 1 ) {}」と記述することで、2番目のli要素を特定しています。そして「return element + ‘です！’」と記述して、2番目の要素だけ最後に「です！」を付与する書き換えを行っています。
このように、関数を使うと複雑な指定が可能になるので効率よくプログラムを書くことができますね。
「html()」と類似メソッドの違い
jQueryには、「html()」とよく似た機能を持つメソッドがいくつかあります。なかでも、特に類似メソッドとしてよく比較されるのが「text()」と「append()」になります。それぞれのメソッドは「html()」と似たような機能がありますが、細かい部分でまったく違うので注意が必要です。
そこで、それぞれのメソッドがどのように違うのかを詳しく見ていきましょう！
「text()」との違いについて
それでは、まず最初に「text()」メソッドの違いについて確認してみましょう！
「text()」「html()」はとてもよく似た機能を持っているのですが、細かい点で少しずつ違いがあります。
例えば、要素の取得について比較してみましょう！
<body>
<p>おはよう</p>
<p>こんにちは</p>
<script>
const result1 = $('p').html();
const result2 = $('p').text();
console.log( result1 );
console.log( result2 );
</script>
</body>
実行結果
おはよう おはようこんにちは
この例では、2つのp要素が配置されているのが分かります。そこで、「html() / text()」それぞれのメソッドを使ってp要素を取得しています。
実行結果を見ると面白い特徴が現れていますね。「html()」は最初に合致した要素のテキスト文字だけを取得していますが、「text()」は合致した要素すべてを取得しています。その証拠に、「text()」で取得した文字は「おはようこんにちは」となっており、2つのp要素を取得して合体させていますね。
さらに、「text()」を使って要素を追加するとどうなるでしょうか？
<body>
<div>
<p>おはよう</p>
</div>
<script>
$('div').text('<h1>タイトル</h1>');
</script>
</body>
この場合は、画面に表示される文字に注目です。「html()」の場合はh1要素としてdivの中身が書き換わりますよね。
ところが、「text()」の場合は文字列として「<h1>タイトル</h1>」がそのまま表示されるだけなのです！
つまり、HTML要素として認識されないという点に注意が必要なわけです。
まとめると、次のようになります。
上記ポイントを忘れないようにしておきましょう！
「append()」との違いについて
次に、「append()」メソッドとの比較をしてみましょう！
まず、決定的に違うのは「append()」には要素を取得する機能は用意されていないという点です。そのため、要素を追加するという機能に絞って比較をしてみましょう。
まずは次のサンプル例を見てください！
<body>
<div>
<p>おはよう</p>
</div>
<script>
$('div').html('<p>サンプルテキスト</p>');
</script>
</body>
実行後のHTML
<div>
<p>サンプルテキスト</p>
</div>
この例では、div要素内にpタグが配置されています。このdiv要素を対象に「html()」を実行するとdiv要素の中身が上書きされますよね？実行後のHTMLを見てみると、中身が指定したp要素に書き換わったいるのが分かります。
これと同じことを「append()」でもやってみましょう！
<body>
<div>
<p>おはよう</p>
</div>
<script>
$('div').append('<p>サンプルテキスト</p>');
</script>
</body>
実行後のHTML
<div>
<p>おはよう</p>
<p>サンプルテキスト</p>
</div>
注目すべきは、実行後のHTMLです！
「html()」は中身を上書きしましたが、「append()」は元々あったp要素の次に指定の要素が配置されていますね。これこそが大きな違いで、「append()」は対象要素内の末尾に指定した要素を追加するメソッドということになります。
同じ「追加」といっても、「html()」「append()」でその挙動は大きく違うので間違わないように注意しましょう！
まとめ
今回は、jQueryで要素を取得・追加・書き換えができる「html()」について学習をしました！
最後に、今回学んだ内容をおさらいしておきましょう！
上記内容を踏まえて、ぜひ自分のプログラムにも積極的に取り入れて活用できるように頑張りましょう！
