9cubed

jQuery - テキストの設定・取得

公開日：2018-12-10 更新日：2019-05-14

[jQuery]

1. 概要

タグとタグの間に挟まれたテキストの設定と取得を行います。

テキストを取得するタグ内に、複数のタグがある場合、それらのテキストも一緒に取得します。タグ自体は含まれません。
また、設定する際には、タグ内のタグは全て削除されて上書きされます。

要素のテキストの設定

$(セレクタ).text( 文字列 );

要素のテキストの取得

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

2. サンプル

<div>タグの内容を動的に書き換えます。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <!-- 画面 -->
  <div id="fruits">
    <div>apple</div>
    <div>orange</div>
    <div>banana</div>
  </div>
  
  <!-- Script -->
  <script>
    $(function() {
      //取得
      console.log( $("#fruits").text() );
      console.log( "-----" );

      //設定
      $("#fruits").text("Hello");

      //取得
      console.log( $("#fruits").text() );
      console.log( $("#fruits").html() );
    });
  </script>

</body></html>

最初の3行は最初の要素のテキストです。タグが含まれていません。
最後の2行はテキスト設定後のテキストと html です。
テキストを設定すると、html は上書きされて削除されます。

apple
orange
banana
-----
Hello
Hello

実行結果：画面

jQuery - テキストの設定・取得

1. 概要

2. サンプル

Tag

New Article