jQueryでのhtmlメソッドの使い方とは？
エンジニア
マネージャー
jQueryでのhtmlメソッドの使い方とは？
今回は、jQueryでのhtmlメソッドの使い方について説明します。htmlメソッドを使用すると、HTML要素を出力したり、取得したりできます。また、class指定でHTMLを操作することもできます。
htmlメソッドについて、ソースコードと共に紹介します。jQueryでのhtmlメソッドの使い方に興味のある方はぜひご覧ください。
HTMLの出力
htmlメソッドを使用すれば、htmlを出力できます。HTMLを以下に記載します。
|
1 |
<h3>text</h3> |
jQueryは以下のように記述します。
|
1 2 3 |
$(function() { $('body').html('new text'); }); |
実行結果は以下のようになります。
See the Pen
jquery_html1 by kskumd (@kskumd)
on CodePen.
元のHTML要素がjQueryでのhtmlメソッドの内容で書き換えられることに注意してください。HTML要素を追加するわけではありません。
htmlメソッドでは、HTMLのタグも出力できます。HTMLを以下に記載します。
|
1 |
<h3>text</h3> |
jQueryは以下のように記述します。
|
1 2 3 |
$(function() { $('body').html('<h3>new title</h3>'); }); |
実行結果は以下のようになります。
See the Pen
jquery_html2 by kskumd (@kskumd)
on CodePen.
HTMLのタグも出力できていることが分かります。
class指定で出力
htmlメソッドは、class指定でHTMLを出力できます。HTMLを以下に記載します。
|
1 2 3 4 5 6 |
<div class="target"> <p>text</p> </div> <div> <p>text</p> </div> |
jQueryは以下のように記述します。
|
1 2 3 4 |
$(function() { // div要素のtarget class指定でhtml要素の出力 $('div.target').html('<p>new text</p>'); }); |
実行結果は以下のようになります。
See the Pen
jquery_html3 by kskumd (@kskumd)
on CodePen.
div要素のtarget class指定でHTML要素が出力されていることが分かります。それ以外のdiv要素は変更がないことが分かります。
class指定で出力（複数）
htmlメソッドは、複数のclass指定でHTMLを出力できます。HTMLを以下に記載します。
|
1 2 3 4 5 6 7 8 9 |
<div class="target1"> <p>text</p> </div> <div class="target2"> <p>text</p> </div> <div class="target3"> <p>text</p> </div> |
jQueryは以下のように記述します。
|
1 2 3 4 |
$(function() { // 複数のclass指定でhtml要素の出力 $('div.target1, div.target2, div.target3').html('<p>new text</p>'); }); |
実行結果は以下のようになります。
See the Pen
jquery_html4 by kskumd (@kskumd)
on CodePen.
カンマ区切りで複数のクラスを指定し、HTML要素を出力していることが分かります。
要素数の取得
htmlメソッドで、HTML要素数を取得する方法を紹介します。ここでは、li要素の要素数を取得します。HTMLを以下に記載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="target"> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> </div> <div class="no_target"> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> </div> |
jQueryは以下のように記述します。
|
1 2 3 4 5 6 7 |
$(function() { // target classのhtmlを取得 $('div.target').html(function() { // htmlの書き換え return 'li要素は' + $('.target').find('li').length + '個です'; }); }); |
実行結果は以下のようになります。
See the Pen
jquery_html5 by kskumd (@kskumd)
on CodePen.
target class配下のli要素の要素数をlengthメソッドで取得し、HTMLとして出力していることが分かります。
HTMLの取得
htmlメソッドで、HTML要素を取得する方法を紹介します。HTMLを以下に記載します。
|
1 2 |
<h3>title</h3> <p>text</p> |
jQueryは以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // h3要素の取得 let result1 = $('h3').html(); // p要素の取得 let result2 = $('p').html(); // 要素出力 console.log( result1 ); console.log( result2 ); }); |
実行結果は以下のようになります。
|
1 2 |
title text |
htmlメソッドで取得したHTML要素がコンソールログに出力されていることが分かります。
HTMLの取得（複数）
htmlメソッドで、複数のHTML要素を取得する方法を紹介します。HTMLを以下に記載します。
|
1 2 3 4 5 |
<p>text1</p> <p>text2</p> <p>text3</p> <p>text4</p> <p>text5</p> |
jQueryは以下のように記述します。
|
1 2 3 4 5 6 7 |
$(function() { // p要素を取得 $('p').html( function( index, element ) { // indexとelementを出力 console.log(index + ': ' + element); }); }); |
実行結果は以下のようになります。
|
1 2 3 4 5 |
0: text1 1: text2 2: text3 3: text4 4: text5 |
p要素が複数ありますので、インデックスがインクリメントされながら、HTML要素がコンソールに出力されていることが分かります。
エンジニア
マネージャー
まとめ
いかがでしたでしょうか。jQueryでのhtmlメソッドの使い方について説明しました。htmlメソッドを使用すると、HTML要素を出力したり、取得したりできます。また、class指定でHTMLを操作することもできます。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅)遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅)病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅)開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅)債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅)PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
JavaScriptのmatchメソッドの使い方を覚えよう！｜正規表現の複数指定について知ろう
JavaScriptのmatchメソッドの使い方とは？ 今回はJavaScriptのmatchメソッドの使用方法について説明します。 matchを使用すれば、正規表現パターンで文字列の検索や抽出ができます。 また、部分一 […]
-
JavaScriptでのStringの使い方｜各メソッドをコード付きで紹介
JavaScriptでのStringの使い方とは？ 今回は、JavaScriptでの文字列（String）の使い方について説明します。JavaScriptでは、文字列をダブルクォーテーション（”）で囲みます。 […]
-
スムーススクロールとは？jQuery・CSS・JavaScriptそれぞれでの使用方法について詳しく解説！
jQuery・CSS・JavaScriptでスムーススクロールする方法とは？ 今回は、Webサイトでスムーススクロールする方法について説明します。 jQuery・CSS・JavaScriptそれぞれでスムーススクロールが […]
-
JavaScriptでのHTML要素とは？追加・削除・置換・コピーの操作方法についてご紹介
JavaScriptでのHTML要素の編集方法とは？ 今回は、JavaScriptでのHTML要素の編集方法について説明します。ここでは、HTML要素の追加・削除・置換・コピーについて、ソースコードを交えて紹介します。 […]
-
JavaScriptでのHTML要素とは？追加・削除・置換・コピーの操作方法についてご紹介
[C#]Dictionaryをforeachで繰り返し処理する方法とは？ 今回は、C#でDictionaryをforeachで繰り返し処理する方法について説明します。foreachを使って、keyとvalue、keyのみ […]
