Javascript DOMでul内のliをappendChildで追加する処理(要素の追加の処理)
表題の件
runボタンを押すとitem2が追加されるコード
jsの各処理についてコメントしたことを忘れないようにする
要素の追加には
1。li要素を作る
2。中身のテキストを設定する
3。DOMツリーに追加する(今回でいうul内のliタグの一覧にセット)
以上の手順が必要。
処理は以下
↓
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>run</button>
<ul>
<li>item 0</li>
<li>item 1</li>
</ul>
<script src="js/main.js"></script>
</body>
</html>
js
`use strict`;
{
document.querySelector('button').addEventListener('click', ()=>{
const item2 = document.createElement('li');
//これでから要素を作っている
item2.textContent = 'item 2';
//テキストitem 2をcreateElementしたliに入れている
const ulNode = document.querySelector('ul');
//親要素を取得する下準備で定数を設定(この辺りはDOMツリーの考え方を参照する)
//ちなみにここのulNodeという定数名はなんでも良い。変えられないのは('ul')の方。
ulNode.appendChild(item2);
//ulの最後の場所を設定しそこにitem2を追加している処理
})
}