diadia

興味があることをやってみる。自分のメモを残しておきます。

ユーザの入力値をブラウザ表示する[DOM操作]

Javascript

ベース記事

Javascriptメモ
DOM操作について

ユーザの入力値をブラウザ表示する[DOM操作]

<!DOCTYPE html>
<html lang="utf-8">
	<head>
		<meta charset="utf-8">
		<title>フォーム内容をリストに反映</title>

	</head>
	<body>
		<label for="lists">リスト</label><br>
		<ul id="lists">
			<li>リストがここに追加される</li>
		</ul>

			<input id="content" type="text" >
			<button  type="submit" onclick="adding();" >送信</button>
		<script>
			function adding(){
				var content = document.getElementById("content") ;
				var li = document.createElement("li");
				var text = document.createTextNode(content.value);
				li.appendChild(text);
				lists.appendChild(li);
			}
		</script>
	</body>

ポイント

ユーザのフォーム入力値はdocument.getElementById()を使い、その戻り値をテキストノードとして作成する。

このときにvalueを使うとフォーム内容だけを抽出できる。valueはinnerTextみたいな扱い。