SE

htmlメソッドとはどんなメソッドでしょうか？

PM

このメソッドはHTML要素を取得したり追加できるメソッドです。基本的なコードから見ていきましょう。

jQueryでのhtmlメソッドの使い方とは？

今回は、jQueryでのhtmlメソッドの使い方について説明します。htmlメソッドを使用すると、HTML要素を出力したり、取得したりできます。また、class指定でHTMLを操作することもできます。

htmlメソッドについて、ソースコードと共に紹介します。jQueryでのhtmlメソッドの使い方に興味のある方はぜひご覧ください。

HTMLの出力

htmlメソッドを使用すれば、htmlを出力できます。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_html1 by kskumd (@kskumd)
on CodePen.

元のHTML要素がjQueryでのhtmlメソッドの内容で書き換えられることに注意してください。HTML要素を追加するわけではありません。

htmlメソッドでは、HTMLのタグも出力できます。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_html2 by kskumd (@kskumd)
on CodePen.

HTMLのタグも出力できていることが分かります。

class指定で出力

htmlメソッドは、class指定でHTMLを出力できます。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_html3 by kskumd (@kskumd)
on CodePen.

div要素のtarget class指定でHTML要素が出力されていることが分かります。それ以外のdiv要素は変更がないことが分かります。

class指定で出力（複数）

htmlメソッドは、複数のclass指定でHTMLを出力できます。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_html4 by kskumd (@kskumd)
on CodePen.

カンマ区切りで複数のクラスを指定し、HTML要素を出力していることが分かります。

要素数の取得

htmlメソッドで、HTML要素数を取得する方法を紹介します。ここでは、li要素の要素数を取得します。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_html5 by kskumd (@kskumd)
on CodePen.

target class配下のli要素の要素数をlengthメソッドで取得し、HTMLとして出力していることが分かります。

HTMLの取得

htmlメソッドで、HTML要素を取得する方法を紹介します。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

htmlメソッドで取得したHTML要素がコンソールログに出力されていることが分かります。

HTMLの取得（複数）

htmlメソッドで、複数のHTML要素を取得する方法を紹介します。HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

p要素が複数ありますので、インデックスがインクリメントされながら、HTML要素がコンソールに出力されていることが分かります。

SE

HTML要素を使いしたり書き換えることができる便利なメソッドですね。

PM

他にも関数を指定することもできる便利なメソッドですので、ぜひマスターしてください。

まとめ

いかがでしたでしょうか。jQueryでのhtmlメソッドの使い方について説明しました。htmlメソッドを使用すると、HTML要素を出力したり、取得したりできます。また、class指定でHTMLを操作することもできます。

ぜひご自身でソースコードを書いて、理解を深めてください。