JavaScriptを基本からまとめてみた【7】【appendChildメソッド】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##appendChild()の使い方
appendChild()は、特定の親ノードの子ノードリストの末尾にノードを追加する。
親要素.appendChild(追加したい要素)　という形で使われ、親要素の末尾に要素が追加される。

例：ulタグにliタグを追加する場合、下記のようにulタグの末尾に追加される。

<ul>
<li>①</li>
<li>②</li>
</ul>
　　　⬇️
<ul>
<li>①</li>
<li>②</li>
<li>③追加</li>
</ul>

##appendChild()を使ったデモ
親要素がul、追加したい要素をliというデモで、フォームに入力したテキストが、liとして追加される。
onchangeで入力欄を変更するとイベントが発火。
createElementで生成されたli要素に、入力テキストがセットされ、appendChildによってulタグ末尾に追加される。

<span>ここに追加されます↓</span>
<ul id="frame">
</ul>
<input type="text" id="input_form" onchange="addList()">
<input type="button" value="削除" onclick="deleteList()">

li {
  margin-left: 10px;
}
input {
  display: block;
  margin-top: 5px;
}
#frame {
  background-color: #A9E2F3;
  padding: 10px;
  max-width: 300px;
}

function addList() {
  var input_area = document.getElementById('input_form');
  var input_value = input_area.value;
  var li_text = document.createElement('li');
  li_text.innerHTML = input_value;
  
  var parent = document.getElementById('frame');
  parent.appendChild(li_text);
  input_area.value = '';
}

function deleteList() {
  var parent = document.getElementById('frame');
  parent.innerHTML = '';
}

##参考サイト
[appendChild()の使い方とデモ【JavaScript】]
(https://web-tsuku.life/appendchild-javascript/)