input要素を操作してみよう

input要素に入力された値を使って要素を作成、DOMツリーに追加していきます。

• 値の取得
• focus()

値の取得

・インプット要素で入力された要素をリストとして追加していく命令を作っていきます。入力部品に何かを入力してボタンをクリックしたら、下のリストに内容が追加されて、また違う内容を入力してボタンをクリックしたら、それが更に下に入力した順番で追加されるといったものを作っていきます。

・まずはHTMLの方に入力部品とボタン、追加されるリストのulを作っておきます

・JavaScriptの方でまずliを作っていきます。createElement()で作ることができるのでconst li = document.createElement('li’);とします。

・中身のテキストをセットしたいのですが、 input 要素に入力された値を使いたいので、まずは要素を取得しておきましょう。const text = document.querySelector('input’);でおkです。定数名は text を入力してもらうので、 text としてあげて querySelector() で input 要素を取得してあげましょう。

・そのうえで li.textContent に値を設定してあげます。入力された値は value 属性で取得できるので、li.textContent = text.value;としてあげます。

・あとは ul に対して、 appendChild() で li を追加してあげればおｋです。

focus()

・ text の値を空文字にしてあげて、さらにフォーカスさせる方法はよく使われるのでセットで覚えておきましょう。

・text.value = ‘’;でからにしてあげて、text.focus();で入力カーソルのそのままに出来ます。