はじめに
学習するに至った経緯
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 = '';
}