ITコラム

jquery html

jQuery

2018.10.18

jQuery【 html 】データを取得・挿入する html メソッドと text メソッド

メッセージ等のテキストを画面上に表示させる際に、jQuery では html メソッドや text メソッドをよく使用します。
今回は、jQuery の html メソッド及び text メソッドの違いや使用方法について紹介します。

目次

2.text メソッド
3.html と text とでデータを取得
4.html と text とでデータを挿入

1.html メソッド

 
html メソッドは、要素の HTML を取得したり 指定した HTML を挿入したりすることができるメソッドです。

html メソッドは、引数によって 3 通りの記述方法があります。

$(セレクタ).html( );

$(セレクタ).html( htmlString );

$(セレクタ).html( function );

html メソッドの引数の内容は、それぞれ以下の通りです。

.html( htmlString )

htmlString
要素内に挿入する HTML 文字列を指定

.html( function )

function
要素内に挿入するHTML文字列を返す関数を指定

▲目次へ戻る

 

2.text メソッド

 
text メソッドは、要素のテキストを取得したり 指定したテキストを挿入したりすることができるメソッドです。

text メソッドは、引数によって 3 通りの記述方法があります。

$(セレクタ).text( );

$(セレクタ).text( textString );

$(セレクタ).text( function );

text メソッドの引数の内容は 以下の通りです。

.text( textString )

textString
要素内に挿入する テキスト文字列を指定

.text( function )

function
要素内に挿入するテキスト文字列を返す関数を指定

▲目次へ戻る

 

3.html と text とでデータを取得

 
html メソッドと text メソッドを使用して、要素のデータを取得して表示します。
各ボタンをクリックしてみて下さい。

Hello!
 

指定要素(id=”spn1″)のコード
<span id=”spn1″>
<span>Hello!</span>
</span>

 
 
 
 

 
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {

  $("#btn1").on("click", function() {
    $("#spn2").text($("#spn1").html()).css("color","blue");   
  });

  $("#btn2").on("click", function() {
    $("#spn2").text($("#spn1").text()).css("color","red");   
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px;">
  <span id="spn1"><span>Hello!</span></span>
 <div style="border:thin solid;">
    指定要素(id="spn1")のコード
    <span id="spn1">
      <span>Hello!</span>
    </span>
  </div>
 
  <input type="button" id="btn1" value="html()で取得" style="color:blue;">
 <input type="button" id="btn2" value="text()で取得" style="color:red;">
 
  <span id="spn2"> </span>
</div>

取得したデータを表示するためには 双方とも text メソッドを使用していますが、データを取得する部分では html メソッドと text メソッドを使い分けています。

html メソッドと text メソッドとのデータ取得の際の違いは 上のサンプルで表示されたデータに現れていますが、HTML データを取得するか テキストデータを取得するかという点にあります。

▲目次へ戻る

 

4.html と text とでデータを挿入

 
今度は、html メソッドと text メソッドを使用して、同じデータを挿入して表示します。
各ボタンをクリックしてみて下さい。

 

挿入するデータ
<span style=”font-size:x-large;”>
Hello!
</span>

 
 

 

 
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  var str ="<span style='font-size:x-large;'>Hello!</span>";

  $("#btn3").on("click", function() {
    $("#p1").html(str).css("color","blue");   
  });

  $("#btn4").on("click", function() {
    $("#p1").text(str).css("color","red");   
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px;">
 <div style="border:thin solid;">
    挿入するデータ
    <span style="font-size:x-large;">
      Hello!
    </span>
  </div>
 
  <input type="button" id="btn3" value="html()で挿入" style="color:blue;">
 <input type="button" id="btn4" value="text()で挿入" style="color:red;">
  <p id="p1"> </p>
</div>

html メソッドを使用して挿入されたデータは HTML データとして処理されるため、「<span style=”font-size:x-large;”>Hello!</span>」は「 文字サイズが “x-large” で 表示テキストが “Hello!” の span 要素 」として表示されます。

一方、text メソッドを使用して挿入されたデータは テキストデータとして処理されるため、タグも含めて全てが文字としてそのまま表示されます。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.