Javascript DOMでul内のliをappendChildで追加する処理(要素の追加の処理)

表題の件

runボタンを押すとitem2が追加されるコード

jsの各処理についてコメントしたことを忘れないようにする

要素の追加には

1。li要素を作る

2。中身のテキストを設定する

3。DOMツリーに追加する(今回でいうul内のliタグの一覧にセット)

 

以上の手順が必要。

処理は以下

 

 

f:id:kirikko_Scondcube:20200411160800p:plain

runボタンを押すとitem1の下にitem2が出る

 

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<link rel="stylesheet" href="css/style.css">
</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を追加している処理

})

}