ywork2020.com

Title

テキストメソッドを使えば、指定したセレクタのテキストを操作できる

textメソッドの概要

textメソッドを使うと、指定したセレクタ間のテキストを引数の値で書き換えることができます。
また、textメソッドの引数を空にしておくことでセレクタ間のテキスト値を取得することもできます。
jQueryではメソッドとして機能させていますが、javascriptとして考えた場合は、エレメントのinnerTextプロパティに 引数の値を代入したり、プロパティ値を取得していることになります。

セレクタをid属性としてコードを書くと以下のようになります。

//jQuery:
$(idセレクタ).text(引数);

//javascript:
document.getElementById("id属性名").innerText = 引数;

実機サンプル

サンプルテキスト : id="idText"

答え : id="idAnswer"
innerText

.textメソッドボタンをクリックするとサンプルテキストの内容で、答えのテキストを書き換えます。
また、F12キーでコンソールログを表示すると、値参照の結果も見ることができます。

サンプルコード

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<p><input type="text" value="サンプルテキスト" id="idText"></p>
	<p id="idAnswer">innerHTML</p>
	<script>
		$("#idAnswer").text(idText.value);
		console.log($("#idAnswer").text());
	</script>
</body>
サンプルコードではボダンがクリックされた時の処理は、混乱を避ける為に掲載していません。
ボタンがクリックされたらscript要素の中のコードが実行されると思って下さい。

サンプルコードの要点

  1. input要素のtext型にidTextの識別子を設定しています。
  2. p要素にidAnswerの識別子を設定しています。
  3. idAnswerのテキスト内容をidTextのvalue値で書き換えています。