ywork2020.com

Title

htmlメソッドを使えば、指定したセレクタの開始要素と終了要素間の値を操作できる

htmlメソッドの概要

htmlメソッドを使うと、指定したセレクタの開始要素と終了要素の間の値を引数の値で書き換えることができます。
また、htmlメソッドの引数を空にしておくことでセレクタの開始要素から終了要素の間の値を取得することもできます。

jQueryではメソッドとして機能させていますが、javascriptとして考えた場合は、エレメントのinnerHTMLプロパティ に引数の値を代入したり、プロパティ値を取得していることになります。

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

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

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

実機サンプル

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

答え : id="idAnswer"
innerHTML

.htmlメソッドボタンをクリックするとサンプルテキストの内容で、答えのテキストを書き換えます。
また、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").html(idText.value);
		console.log($("#idAnswer").html());
	</script>
</body>
サンプルコードではボダンがクリックされた時の処理は、混乱を避ける為に掲載していません。
ボタンがクリックされたらscript要素の中のコードが実行されると思って下さい。

サンプルコードの要点

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