ユーザの入力値をブラウザ表示する[DOM操作]
ベース記事
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みたいな扱い。