【jQuery入門】テキストやHTMLを設定／取得する

text／htmlメソッドを使って、要素に対してテキストを設定する

指定された要素にテキストを設定する場合は、textメソッドまたはhtmlメソッドを利用する。

text／htmlメソッドはよく似ているが、ひとつ大きく異なる点がある。

それは、textメソッドで埋め込んだhtmlタグはそのまま文字列と表示される点

一方、htmlメソッドで埋め込んだHTMLタグはタグとして認識される

つまり、HTMLを含んだ文字列はhtmlメソッドで、HTMLを含まない、またはHTMLを含んでいてもタグとして認識させたくない文字列はtextメソッドを利用する。

<div id="text"></div>
<div id="html"></div>

$(function () {
  $("#text").text('<a href="https://placehold.jp/50x50xpng">ほげ</a>');
  $("#html").html('<a href="https://placehold.jp/50x50xpng">ほげ</a>');
});

See the Pen
jQuery6-1 by shinjiezumi (@sezumi)
on CodePen.

text／htmlメソッドを使って、要素の中のテキストを取得する

要素の中のテキストを取得するには、同じくtextまたはhtmlメソッドを利用する

textメソッドが純粋なテキスト部分だけを取得するのに対し、htmlメソッドはHTMLタグを含んだテキストを取得する。

また、textメソッドがセレクターに合致したすべての要素のテキストをまとめた結果を返すのに対して、htmlメソッドは最初の要素だけを返す

そのため、それぞれの違いを理解したうえでお互いを使い分ける必要がある

<ul id="sample2-list">
  <li><a href="https://placehold.jp/50x50xpng">ほげ</a></li>
  <li><a href="https://placehold.jp/50x50xpng">ふが</a></li>
</ul>

$(function () {
  console.log($("#sample2-list li").text()); // ほげふが
  console.log($("#sample2-list li").html()); // <a href="https://placehold.jp/50x50xpng">ほげ</a>
});

See the Pen
jQuery6-1 by shinjiezumi (@sezumi)
on CodePen.

valメソッドでフォーム要素の値を取得する

フォーム要素（<input>, <textarea>, <select>, <button>要素）の値を取得する時は、valメソッドを使う。
※text, htmlメソッドは使えない

<form action="">
  <div>
    <input type="text" value="テキスト" />
  </div>
  <div>
    <select>
      <option value="ほげ">ほげ</option>
      <option value="ふが">ふが</option>
      <option value="hogefuga">hogefuga</option>
    </select>
  </div>
  <div>
    <textarea name="" cols="30" rows="4">ほげ
            ふが
            ほげふが
            </textarea>
  </div>
  <div>
    <input type="submit" value="ふがふが" />
  </div>
  <div>
    <button value="ほげ">ボタン</button>
  </div>
</form>

$(function () {
  console.log($('#sample3 input[type="text"]').val());
  console.log($("#sample3 select").val());
  console.log($("#sample3 textarea").val());
  console.log($('#sample3 input[type="submit"]').val());
  console.log($("#sample3 button").val());
});

See the Pen
jQuery6-1 by shinjiezumi (@sezumi)
on CodePen.

valメソッドを使って、フォーム要素の値を設定する

フォーム要素に値を設定する場合も、（html, textメソッドではなく）valメソッドを使う。引数には、設定したい値を指定する

<form action="">
  <div>
    <input type="text" value="" />
  </div>
  <div>
    <select>
      <option value="ほげ">ほげ</option>
      <option value="ふが">ふが</option>
      <option value="hogefuga">hogefuga</option>
    </select>
  </div>
  <div>
    <textarea name="" cols="30" rows="4"></textarea>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>

$(function () {
  $('#sample4 input[type="text"]').val("テキスト1");
  $("#sample4 select").val("ふが");
  $("#sample4 textarea").val("こんにちは\nこんばんは\nさようなら");
  $('#sample4 input[type="submit"]').val("送信ボタン");
});

See the Pen
jQuery6-3 by shinjiezumi (@sezumi)
on CodePen.