メモ帳作成

inputに記載した文字を

ulで追加していく機能です。

HTMLコード

  <input type="text">
 <button>追加</button>

 <ul>
 </ul>

JSコード

  document.querySelector('button').addEventListener('click', () => {
   const li = document.createElement("li");　　　　　⇒　リストに追加するli要素を作成
   const text = document.querySelector("input");　　⇒　inputした中身を取得するための要素を作成
   li.textContent = text.value;　　　　　　　　　　　⇒　入力した値をvalue属性で取得
   document.querySelector("ul").appendChild(li);　　⇒　ulに追加される
 });

追加した後にinput内をクリアにする方法

JSコード

  document.querySelector('button').addEventListener('click', () => {
   const li = document.createElement("li");
   const text = document.querySelector("input");
   li.textContent = text.value;
   document.querySelector("ul").appendChild(li);

   text.value = "";　　⇒　input内を空文字にする
   text.focus();      ⇒　追加した後もinput内に文字が打てるようになる
   });

・削除のみ

・削除してフォーカスする