【jQuery】html()を使ってHTML要素の取得や設定を行う!

HTML要素の取得や設定を行うにはjQueryのhtml()メソッドを使用します。

jQueryのhtml()メソッドとは要素内のHTMLを取得、またはエレメント内にHTMLを設定するメソッドであり、HTML要素を取得したり意図的に要素の追加や書き換えをすることが出来ます。

また、要素の数によってHTML要素を書き換えるなど、動的にHTML要素を設定することもできます。

今回は、jQueryのhtml()メソッドを使ってHTML要素の取得や設定を行う方法について以下の内容で解説していきます。

⚫︎ 指定した要素のHTML要素を取得する場合
⚫︎ 指定した要素にHTML要素を設定する場合
⚫︎ 指定した要素のHTML要素を動的に設定する場合

⚫︎ jQueryを使用せずに指定した要素のHTML要素の取得や設定を行う場合
⚫︎ html()とtext()との違い

ハルトさん

今回はjQueryのhtml()メソッドでHTML要素の取得や設定を行う方法について説明していきます。

さとみさん

はい!
お願いします!

html()とは

html()メソッドとは指定した要素にフィルタリングするメソッドとなります。

html()の書き方

html()の書き方は下記となります。

$の()に要素を指定し、html()メソッドの引数に追加したい内容を指定して呼び出すことで、$の()で指定した要素に追加したい内容を含むテキストとして出力されます。

また、html()メソッドの引数に関数を指定して呼び出すことで、動的なテキストを出力することができます。

$の()の要素はタグ名や、クラス名、id名を指定します。

HTML要素の取得や設定を行うサンプルコード

html()メソッドでHTML要素の取得や設定を行うサンプルコードを紹介します。

指定した要素のHTML要素を取得する場合

指定した要素のHTML要素を取得する場合はhtml()メソッドを引数無しで使用します。

sample.html

index.js

出力結果

html()メソッドによって、指定した要素のHTML要素を取得しています。
そのため、ボタンを押すと、コンソールに指定した要素のHTML要素が表示されています。

指定した要素にHTML要素を設定する場合

指定した要素にHTML要素を設定する場合はhtml()メソッドの引数に追加したいテキストを指定します。

sample.html

index.js

出力結果

html()メソッドによって、指定した要素にHTML要素を設定しています。
そのため、ボタンを押すと、指定した要素に設定したHTML要素が出力されています。

さとみさん

html()の引数に追加したいテキストを指定すると、指定する要素に好きなテキストを表示させることができるんですね!

ハルトさん

そうですね。
html()の引数にテキストを文字列で指定すると、指定した要素に引数のテキストを表示させることができます。
また、タグも込みで文字列として指定すると、タグを認識して出力します。

指定したHTML要素を動的に設定する場合

指定したHTML要素を動的に設定する場合はhtml()の引数に関数を指定します。

sample.html

index.js

出力結果

html()メソッドの引数に関数を指定することで、指定したHTML要素を動的に設定しています。
そのため、ボタンを押すとボタンを押した回数がカウントされて表示されています。

jQueryを使用せずにHTML要素の取得や設定を行う場合

jQueryを使用せず純粋なJavaScrioptでHTML要素の取得や設定を行ってみます。

sample.html

index.js

出力結果

純粋なJavaScrioptでHTML要素の取得や設定を行っています。

さとみさん

jQueryを使わず同じことを実行させようとすると、とてもコードが長くなるんですね!
これだとjQueryの方がとても便利です!

ハルトさん

そうですよね。
コードの量や分かりやすさを比較するとあきらかにjQueryの方が良いですよね。

html()とtext()との違い

html()メソッドとtext()メソッドはどちらもテキストを取得するメソッドですが、少し異なる部分があります。

その異なる部分とは、取得するテキストを「タグ + 文字列」で認識するのか「全て文字列」で認識するかであり、html()メソッドは前者で認識し、text()メソッドは後者で認識するようになります。

sample.html

index.js

出力結果

どちらのメソッドもテキストを取得して表示していますが、html()はタグと文字列を別のテキストと認識して取得しています。
しかし、text()はタグと文字列も全て文字列と認識して取得しています。

さとみさん

html()メソッドとtext()メソッドでどちらも同じテキストを設定して呼び出していますけど、出力されている内容は異なっていますね!

ハルトさん

html()メソッドは設定したテキストでタグは「タグ」として、文字列は「文字列」として出力します。
しかし、text()メソッドはタグや文字列など関係なく「全て文字列」として出力するようになります。

ハルトさん

そのため、サンプルコードではhtml()メソッドではh2タグで囲まれた要素として、text()メソッドでは「<h2>要素にテキストを追加する!</h2>」という要素を出力しています。

今回のポイント

html()でHTML要素の設定や取得

⚫︎ HTML要素の設定や取得するにはjQueryのhtml()メソッドを使用する

⚫︎ html()メソッドの引数には、追加したいテキストか関数を指定する

⚫︎ html()メソッドを引数無しで使用すると、指定した要素のHTML要素を取得することができる

⚫︎ html()メソッドの引数に追加したいテキストを指定すると、指定した要素にHTML要素を設定することができる

⚫︎ html()メソッドの引数に関数を指定すると、指定した要素にHTML要素を動的に設定することができる

⚫︎ html()メソッドとtext()メソッドの違いは取得するテキストを「タグ + 文字列」として認識するか、「全て文字列」で認識するかである

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し