DOMの操作

#概要
inputから値を受け取り、要素を生成します。

#HTML

index.html

<input type="text">
<button>Add</button>
　
　<ul>
  </ul>

今回はこちらのHTTMLから情報を受け取り、ul要素を生成して行きます。

inputからの入力内容をul要素に反映していきます。

#JS

index.js

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

  }

①定数addにquerySerectorでボタン要素を代入します。
②add.addEventListenerでクリックイベントが起きたときの関数を登録します。
③今回作成する定数liに要素の作成を代入します。
今回はul要素にを作成します。document.createElement(タグ名);でDOM内のツリーに追加することができます。
③input要素から値を受け取るために、document.querySelector('input');で要素を取得。定数textに代入します。
④li要素のvalue属性を取得します。
⑤appendChild(li);で要素の追加を行います。
*removeChild();でノードをとりのぞきます。

あくまで、ＪＳ側で処理しているのはDOMでありHTMLファイルが書き換えられているわけではありません。