jQueryで要素内のテキストを取得・変更するtext()について紹介します。
これを使うことで、Ajax通信など何かしらの操作や通信がされた時に、動的にテキストを変更することができます。
text()で要素のテキストを取得する
|
1 |
$("要素").text() |
指定したクラス、ID、タグなどの要素内のテキストを取得します。
子要素がある場合
指定したタグが子要素を含む場合、 HTMLタグを除いた子要素のテキストも含めて取得されます。ただし、pタグの場合は、親要素のテキストとインラインの子要素のテキストのみ取得されるようなので注意してください。
例えば、以下のようなサンプルの場合、テキスト「親要素」「子要素１」だけが表示されます。
|
1 2 3 4 5 6 7 |
<p id="parent"> 親要素 <span>子要素１</span> <p>子要素2</p> <p>子要素3</p> </p> <button id="button">取得する</button> |
|
1 2 3 |
$("#button").on("click", function(){ alert($("#string").text()); }); |
このように、子要素を扱う場合はやや複雑になってしまうので、子要素をtext()で取得するといった使い方は避けたほうが良いでしょう。
text()で要素内のテキストを変更する
|
1 |
$("要素").text("文字") |
指定したクラス、ID、タグなどの要素内のテキストを変更します。この時、変更する文字がHTMLなどの場合、text()では自動的にエスケープされます。
子要素がある場合
指定したタグの子要素は無視され、text()で指定した文字に書き換えられます。
|
1 2 3 4 5 |
<div id="parent"> 親要素 <p>子要素</p> </div> <button id="button">変更する</button> |
|
1 2 3 |
$("#button").on("click", function(){ $("#parent").text("変更後の文章"); }); |
この例の場合、ボタンをクリックすると以下のように書き換えられます。
|
1 2 3 |
<div id="parent"> 変更後の文章 </div> |
ただし、pタグの場合は、また挙動が異なるようなので注意してください。
サンプル
フォームに文章を入力し、変更するボタンをクリックすると入力した内容に文章が変わるサンプルです。
HTMLは以下のようになります。
|
1 2 3 |
<p id="string">デフォルトの文章</p> <input type="text" id="text" placeholder="変更する文章"> <button id="button">変更する</button> |
jQueryは以下のようになります。ボタンがクリックされたらval()で、フォームに入力された値を取得し、文章を書き換えます。
|
1 2 3 4 |
$("#button").on("click", function(){ var newText = $("#text").val(); $("#string").text(newText); }); |
デフォルトの文章
今回はわかりやすくするためにこのようなサンプルを使いましたが、例えば、チェックボックスをチェックしたら文章を変更するといった実装も可能です。
