MENU
  1. ホーム
  2. JS
  3. jQuery
  4. 要素にテキスト内容を取得・設定

要素にテキスト内容を取得・設定

jQuery
2024.05.12

textメソッドは、指定した要素のテキスト内容を変更するために使われます。

text
記法

$(“対象要素”).text(“内容”);

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>textについて</title>
  </head>
  <body>
    <p>入力した文字が表示されます。</p>
    <input type="text" id="textInput" placeholder="ここに入力してください" />
    <div id="output"></div>

    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了
$(function () {
  $("#textInput").on("input", function () {
    // ユーザーが入力したテキストを取得
    var inputText = $(this).val();
    // 別の要素に入力テキストを表示
    $("#output").text(inputText);
  });
});
出力結果

入力した文字が表示されます。

jQuery