.net column
.NET開発者のためのブログメディア

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

2021年03月19日

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を操作することもできます。

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags