jQuery逆引きリファレンス
要素配下のテキストを取得／設定するには？（text／html）
textメソッドやhtmlメソッドを使って要素配下のテキストやHTMLソースを取得する方法を解説。それぞれの使い分けについても説明する。
要素配下のテキストを取得／設定するには、textメソッド、またはhtmlメソッドを利用します。いずれも似たような役割を持ちますが、いくつか異なる点があります。具体的なサンプルと共に見ていきましょう。
タグ文字列を認識するかどうか
textメソッドは指定されたタグ文字列をそのまま表示しますが、htmlメソッドはHTMLとして処理します。例えば以下は、アンカータグ（＝<a>タグ）をそれぞれtext／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メソッドで設定したアンカータグはそのまま「<a ...>～</a>」と表示され、htmlメソッドで設定したアンカータグだけがリンクとして表示されます。
その性質上、文字列は基本的にtextメソッドで設定し、タグとして認識させたい文字列だけをhtmlメソッドで設定すべきです。特に、ユーザーからの入力値、もしくはデータベースや外部のサービスから取得したデータを無制限にhtmlメソッドに渡すのは避けてください。例えば、文字列が<script>要素を含んでいた場合、意図しないコードが勝手に実行されてしまう原因になるからです*1。
- *1 <script>要素は1つの例で、これを除去すれば問題が解決するわけではありません。例えば、
<img onload="..." />のような例を考えてみましょう。
取得するテキストの範囲
引数なしでtext／htmlメソッドを呼び出すことで、現在の要素配下のテキストを取得できます。ただし、それぞれ取得するテキストの範囲が異なる点に注意です。
以下は、id="list"である要素配下の<li>要素のテキストを、それぞれtext／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>
|
|
ASP.NET MVC 5実践プログラミングJavaScript逆引きレシピ jQuery対応Ruby on Rails 4アプリケーションプログラミング10日でおぼえるjQuery入門教室 第2版独習ASP.NET 第4版
|
|
<a href="#">ASP.NET MVC 5実践プログラミング</a>
|
まず、textメソッドはあくまでテキスト部分だけを取得するのに対して、htmlメソッドはタグも含んだテキストを取得します。
そしてもう一点、textメソッドは$()関数で取得した全ての要素から、テキストをまとめて取得するのに対して、htmlメソッドは$()関数で取得した先頭の要素だけを取得します。
処理対象：HTMLの取得／設定 カテゴリ：要素｜属性
API：.html() カテゴリ：Manipulation（要素の操作） > DOM Insertion, Inside（DOM内部への挿入）｜Attributes（属性）
API：.text() カテゴリ：Manipulation（要素の操作）
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
2. 現在利用しているjQueryのバージョンを確認するには？
現在利用しているjQueryライブラリのバージョンを、JavaScriptコードから実行中に確認する方法を説明する。また、ライブラリのバージョンの使い分けや、旧バージョンの入手方法も紹介。
3. 以前のバージョンで開発したアプリを最新のjQueryで動作させるには？
基本的に旧バージョンのjQueryで作成したページは最新版でも動作するが、jQuery 1.9以前から最新化する場合には動作しない場合がある。その問題を回避できるjQuery Migrateプラグインの基本的な使い方を説明する。
4. 【現在、表示中】≫ 要素配下のテキストを取得／設定するには？（text／html）
textメソッドやhtmlメソッドを使って要素配下のテキストやHTMLソースを取得する方法を解説。それぞれの使い分けについても説明する。
5. 要素のスタイルプロパティを変更するには？（css）
背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説。相対値の指定や複数まとめて指定、現在の値の取得なども説明する。
