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