Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

要素配下のテキストを取得/設定するには?(text/html)

2014年11月20日

textメソッドやhtmlメソッドを使って要素配下のテキストやHTMLソースを取得する方法を解説。それぞれの使い分けについても説明する。

  • このエントリーをはてなブックマークに追加

 要素配下のテキストを取得/設定するには、textメソッド、またはhtmlメソッドを利用します。いずれも似たような役割を持ちますが、いくつか異なる点があります。具体的なサンプルと共に見ていきましょう。

タグ文字列を認識するかどうか

 textメソッドは指定されたタグ文字列をそのまま表示しますが、htmlメソッドはHTMLとして処理します。例えば以下は、アンカータグ(=<a>タグ)をそれぞれtexthtmlメソッドで設定した例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<p id="text"></p>
<p id="html"></p>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
  $('#text').text(
    '<a href="http://www.wings.msn.to/">サーバーサイド技術の学び舎</a>');
  $('#html').html(
    '<a href="http://www.wings.msn.to/">サーバーサイド技術の学び舎</a>');
});
</script>
</body>
</html>
text/htmlメソッドでアンカータグを設定するコード(html.html)
アンカータグをそのまま文字列として表示(上)、リンクとして表示(下)
アンカータグをそのまま文字列として表示(上)、リンクとして表示(下)

 結果からも確認できるように、textメソッドで設定したアンカータグはそのまま「<a ...>~</a>」と表示され、htmlメソッドで設定したアンカータグだけがリンクとして表示されます。

 その性質上、文字列は基本的にtextメソッドで設定し、タグとして認識させたい文字列だけをhtmlメソッドで設定すべきです。特に、ユーザーからの入力値、もしくはデータベースや外部のサービスから取得したデータを無制限にhtmlメソッドに渡すのは避けてください。例えば、文字列が<script>要素を含んでいた場合、意図しないコードが勝手に実行されてしまう原因になるからです*1

  • *1 <script>要素は1つの例で、これを除去すれば問題が解決するわけではありません。例えば、<img onload="..." />のような例を考えてみましょう。

取得するテキストの範囲

 引数なしでtexthtmlメソッドを呼び出すことで、現在の要素配下のテキストを取得できます。ただし、それぞれ取得するテキストの範囲が異なる点に注意です。

 以下は、id="list"である要素配下の<li>要素のテキストを、それぞれtexthtmlメソッドで取得する例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<ul id="list">
  <li><a href="#">ASP.NET MVC 5実践プログラミング</a></li>
  <li><a href="#">JavaScript逆引きレシピ jQuery対応</a></li>
  <li><a href="#">Ruby on Rails 4アプリケーションプログラミング</a></li>
  <li><a href="#">10日でおぼえるjQuery入門教室 第2版</a></li>
  <li><a href="#">独習ASP.NET 第4版</a></li>
</ul>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
  console.log($('#list li').text());
  console.log($('#list li').html());
});
</script>
</body>
</html>
text/htmlメソッドで要素配下のテキストを取得するためのコード(html_get.html)
ログ
ASP.NET MVC 5実践プログラミングJavaScript逆引きレシピ jQuery対応Ruby on Rails 4アプリケーションプログラミング10日でおぼえるjQuery入門教室 第2版独習ASP.NET 第4版
HTML
<a href="#">ASP.NET MVC 5実践プログラミング</a>
取得された内容(上:textメソッド/下:htmlメソッド)

 まず、textメソッドはあくまでテキスト部分だけを取得するのに対して、htmlメソッドはタグも含んだテキストを取得します。

 そしてもう一点、textメソッドは$()関数で取得した全ての要素から、テキストをまとめて取得するのに対して、htmlメソッドは$()関数で取得した先頭の要素だけを取得します。

処理対象:テキストの取得/設定 カテゴリ:要素
処理対象:HTMLの取得/設定 カテゴリ:要素|属性
API:.html() カテゴリ:Manipulation(要素の操作) > DOM Insertion, Inside(DOM内部への挿入)|Attributes(属性)
API:.text() カテゴリ:Manipulation(要素の操作)

※以下では、本稿の前後を合わせて5回分(第1回~第5回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
1. jQueryを利用するには?

jQueryの特徴を簡単に紹介。jQueryライブラリをCDNから、もしくはローカルにダウンロードしてから利用する方法を説明する。

jQuery逆引きリファレンス
2. 現在利用しているjQueryのバージョンを確認するには?

現在利用しているjQueryライブラリのバージョンを、JavaScriptコードから実行中に確認する方法を説明する。また、ライブラリのバージョンの使い分けや、旧バージョンの入手方法も紹介。

jQuery逆引きリファレンス
3. 以前のバージョンで開発したアプリを最新のjQueryで動作させるには?

基本的に旧バージョンのjQueryで作成したページは最新版でも動作するが、jQuery 1.9以前から最新化する場合には動作しない場合がある。その問題を回避できるjQuery Migrateプラグインの基本的な使い方を説明する。

jQuery逆引きリファレンス
4. 【現在、表示中】≫ 要素配下のテキストを取得/設定するには?(text/html)

textメソッドやhtmlメソッドを使って要素配下のテキストやHTMLソースを取得する方法を解説。それぞれの使い分けについても説明する。

jQuery逆引きリファレンス
5. 要素のスタイルプロパティを変更するには?(css)

背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説。相対値の指定や複数まとめて指定、現在の値の取得なども説明する。

サイトからのお知らせ

Twitterでつぶやこう!