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

Javascript
プログラミング言語

公開日時: 2021-03-19 　更新日時: 2022-06-06

この記事でわかること

システム エンジニア: htmlメソッドとはどんなメソッドでしょうか？

プロジェクト マネージャー: このメソッドはHTML要素を取得したり追加できるメソッドです。基本的なコードから見ていきましょう。

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

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

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

HTMLの出力

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

<h3>text</h3>

1	<h3>text</h3>

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

$(function() {
  $('body').html('new text');
});

$(function() {

$('body').html('new text');

});

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

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

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

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

<h3>text</h3>

1	<h3>text</h3>

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

$(function() {
  $('body').html('<h3>new title</h3>');
});

$(function() {

$('body').html('<h3>new title</h3>');

});

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

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

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

class指定で出力

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

<div class="target">
  <p>text</p>
</div>
<div>
  <p>text</p>
</div>

</div>

<div>

</div>

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

$(function() {
  // div要素のtarget class指定でhtml要素の出力
  $('div.target').html('<p>new text</p>');
});

$(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を以下に記載します。

<div class="target1">
  <p>text</p>
</div>
<div class="target2">
  <p>text</p>
</div>
<div class="target3">
  <p>text</p>
</div>

</div>

</div>

</div>

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

$(function() {
  // 複数のclass指定でhtml要素の出力
  $('div.target1, div.target2, div.target3').html('<p>new text</p>');
});

$(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を以下に記載します。

<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>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

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

$(function() {
  // target classのhtmlを取得
  $('div.target').html(function() {
    // htmlの書き換え
    return 'li要素は' + $('.target').find('li').length + '個です';
  });
});

$(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を以下に記載します。

<h3>title</h3>
<p>text</p>

1 2	<h3>title</h3> <p>text</p>

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

$(function() {
    // h3要素の取得
    let result1 = $('h3').html();
    // p要素の取得
    let result2 = $('p').html();

    // 要素出力
    console.log( result1 );
    console.log( result2 );
});

$(function() {

// h3要素の取得

let result1 = $('h3').html();

// p要素の取得

let result2 = $('p').html();

// 要素出力

console.log( result1 );

console.log( result2 );

});

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

title
text

1 2	title text

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

HTMLの取得（複数）

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

<p>text1</p>
<p>text2</p>
<p>text3</p>
<p>text4</p>
<p>text5</p>

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

$(function() {
  // p要素を取得
  $('p').html( function( index, element ) {
    // indexとelementを出力
    console.log(index + ': ' + element);
  });
});

$(function() {

// p要素を取得

$('p').html( function( index, element ) {

// indexとelementを出力

console.log(index + ': ' + element);

});

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

0: text1
1: text2
2: text3
3: text4
4: text5

0: text1

1: text2

2: text3

3: text4

4: text5

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

システム エンジニア: HTML要素を使いしたり書き換えることができる便利なメソッドですね。

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

まとめ

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

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

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

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

HTMLの出力

class指定で出力

class指定で出力（複数）

要素数の取得

HTMLの取得

HTMLの取得（複数）

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

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

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

HTMLの出力

class指定で出力

class指定で出力（複数）

要素数の取得

HTMLの取得

HTMLの取得（複数）

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

JavaScriptのmatchメソッドの使い方を覚えよう！｜正規表現の複数指定について知ろう

JavaScriptでのStringの使い方｜各メソッドをコード付きで紹介

スムーススクロールとは？jQuery・CSS・JavaScriptそれぞれでの使用方法について詳しく解説！

JavaScriptでのHTML要素とは？追加・削除・置換・コピーの操作方法についてご紹介

JavaScriptでのHTML要素とは？追加・削除・置換・コピーの操作方法についてご紹介