jQueryのhtml()で追加・取得・書き換えの方法まとめ！

この記事を参考にすればおｋ

www.sejuku.net

以下コピペ

jQueryのhtml()で追加・取得・書き換えの方法まとめ！

マサト マサト

2017/11/29

2019/5/28

こんにちは、ライターのマサトです！

今回は、jQueryでHTML要素を取得したり追加・書き換えを行える「html()」メソッドについて学習をしていきましょう！

この記事では、

「html()」とは？

文字を出力する

HTML要素を取得する

HTML要素を書き換える

HTML要素を追加する

関数による書き換えについて

「html()」と類似メソッドの違い

などの使い方に関して解説していきます。

この記事で、html()メソッドをしっかり学習して自分のスキルアップを目指しましょう！

この記事の目次

1 「html()」とは？

1.1 文字を出力する

1.2 HTML要素を取得する

1.3 HTML要素を書き換える

1.4 HTML要素を追加する

2 関数による書き換えについて

3 「html()」と類似メソッドの違い

3.1 「text()」との違いについて

3.2 「append()」との違いについて

4 まとめ

「html()」とは？

それでは、まず最初に「html()」メソッドの基本的な知識から学習を進めていきましょう！

「html()」を使うと、任意のHTML要素を取得したり意図的に要素を追加・書き換えをすることが出来ます。

例えば、次のようなp要素が1つあるとします。

こんにちは！

「html()」を使えば、このp要素にあるテキスト文字を取得したりp要素をa要素に変えてしまうことも可能です！

また、1つだけのp要素を3つに増やしたり、完全に削除することも簡単に実現できる便利なメソッドなのです。

本記事では、この「html()」メソッドについて基本から応用例まで詳しく解説していきますのでぜひ参考にしてみてください！

文字を出力する

まずは、「html()」メソッドを使ってブラウザ上に簡単な文字列を出力してみましょう！

「html()」の基本的な書き方としては、【 対象要素.html( 文字列 ) 】のように引数へ出力したい文字列を指定すればOKです。

次のサンプル例を見てください！

$('body').html('こんにちは！');

この例では、body要素内に文字列を出力しています。

実行すると、ブラウザの画面上に「こんにちは！」という文字列が表示されます。このように引数へ出力したい文字列を指定すれば簡単に特定の文字列を出力出来るわけです。

さらに、HTMLコンテンツを指定することも可能です！

$('body').html('

こんにちは！

');

このように、引数へ「h1タグ」を記述することでh1要素を表示することもできます。

これにより、任意のHTMLコンテンツを追加することが出来るので大変便利なメソッドになります。

HTML要素を取得する

次に、任意のHTML要素を取得してみましょう！

「html()」を使って要素を取得する場合は、【 対象要素.html() 】のように引数へ何も指定する必要はありません。

次のサンプル例を見てください！

こんにちは

サンプルリンク

実行結果

こんにちは

サンプルリンク

この例では、p要素とa要素が1つずつ配置されていますね。それぞれの要素を対象にして、「html()」を実行することで簡単に要素を取得することができるわけです。

実行例を見ると、p要素・a要素それぞれのテキスト文字が取得できているのが分かります！このように「html()」の引数を指定しなければ要素の取得ができ、指定すれば要素の追加・書き換えができるわけです。

これは「html()」の基本的なポイントになるので、忘れないようにしておきましょう！

HTML要素を書き換える

今度は、すでに配置されているHTML要素を別の要素に書き換えてみましょう！この書き換えをするには、まず「html()」の重要な特性について知っておく必要があります。

それは、対象の要素に「html()」を実行すると中身がすべて上書きされるという性質です！

分かりやすいように、次のコード例を見てください。

 

タイトル

サンプルテキスト

リンク

実行後のHTML

 

こんにちは

この例では、div要素内に「h1要素・p要素・a要素」がそれぞれ配置されていますよね？

この状態でdiv要素に対して「html('

こんにちは

')」と記述しています。すると、実行後のHTMLを見るとdiv要素内がhtml()で指定したp要素に入れ替わっているのが分かりますね。

つまり、元々あった要素は上書きされて、新しくhtm()で指定したp要素に書き換わったというわけです。このように、上書きされることで自分の好きなHTML要素を配置できるのが「html()」の特徴になります。

HTML要素を追加する

「html()」を使った要素の書き換え方が分かれば、好きな要素を追加する方法も簡単ですね。なぜなら、追加したい要素をhtml()の引数に指定すれば良いからです。ただし、上書きされるという性質を忘れないように指定する必要があります。

次のサンプル例を見てください！

リンクはコチラから

実行後のHTML

リンクはコチラから

この例では、単純なp要素が配置されています。

このp要素の文字列で「コチラ」という部分にリンク要素を追加しているのが分かりますね。ポイントは、p要素に対して「html('

リンクはコチラから

')」のように元のp要素も記述している点です。

なぜなら、html()は中身を上書きするので元々あった要素も一緒に記述しないと要素を追加したことにならないからです。初心者の方は間違いやすいポイントなので、よく覚えておきましょう！

関数による書き換えについて

これまでは「html()」の引数に任意の文字列やHTML要素を記述する方法を学習してきました。

しかし、実は引数に「関数」を指定することもできます！この関数を活用することで、より複雑な要素の書き換えが実現できるのでご紹介しておきます。

一般的な記述方法としては、【 対象要素.html( function( index, element ) { } ) 】のように引数へ関数を指定します。

関数の「index」「element」の部分には、次のような情報が格納されています。

「index」：対象要素のインデックス番号

「element」：対象のHTMLコンテンツ

これらの内容を簡単なサンプル例で見てみましょう！

• 項目１

• 項目２

• 項目３

実行後のHTML

• 項目１

• 項目２です！

• 項目３

この例では、3つのli要素を持つリストが配置されています。

このli要素を対象にして関数を実行しているのが分かりますね。「index」にはli要素のインデックス番号が格納されるので、0〜2までの数値が順番に入ることになります。

「element」にはそれぞれのli要素が格納されているわけです。「if( index === 1 ) {}」と記述することで、2番目のli要素を特定しています。そして「return element + 'です！'」と記述して、2番目の要素だけ最後に「です！」を付与する書き換えを行っています。

このように、関数を使うと複雑な指定が可能になるので効率よくプログラムを書くことができますね。