#JavaScript上での操作
index.html
<!DOCTYPE html>
<html>
<head>
<title><ToDo-js></ToDo-js></title>
<meta charset="UTF-8" />
<script src="src/index.js"></script>
</head>
<body>
<div class="input-area">
<input id="add-text" placeholder="ToDoを入力" />
<button id="add-button">追加</button>
</div>
<div class="incomplete-area">
<p class="title">未完了のToDo</p>
<ul>
<li>
<div class="list-row">
<p class="todo-name">ToDoです</p>
<button>完了</button>
<button>削除</button>
</div>
</li>
<li>
<div class="list-row">
<p class="todo-name">ToDoです</p>
<button>完了</button>
<button>削除</button>
</div>
</li>
</ul>
</div>
<div class="complete-area">
<p class="title">完了したToDo</p>
<ul>
<li>
<div class="list-row">
<p class="todo-name">ToDoでした</p>
<button>戻す</button>
</div>
</li>
</ul>
</div>
</body>
</html>
#####createElement
#####className
↓document.createElement("div"); でdivを生成する。
↓div.classNameでクラス名を付与する。
index.js
const div = document.createElement("div");
div.className = "list-row";
console.log(div);
#####innerText
↓p.innerText で、要素内のレンダリングされたテキストを取得
index.js
const p = document.createElement("p");
p.className = "todo-name";
p.innerText = inputText;
console.log(p);
#####appendChild
↓div.appendChild(p); で、divの子要素にpを設定。
index.js
div.appendChild(p);
console.log(div);
#####parentNode
#####removeChild
↓parentNode で、親要素・親ノードを取得する。
↓removeChild で、特定の子要素（子ノード）を削除する。
index.js
const deleteButton = document.createElement("button");
deleteButton.innerText = "削除";
deleteButton.addEventListener("click", () => {
//押された削除ボタンの親（div）を未完了リストから削除
const deleteTarget = deleteButton.parentNode;
document.getElementById("incomplete-list").removeChild(deleteTarget);
});
#####firstElementChild
↓const addTarget = completeButton.parentNode; で、完了ボタンの親要素（div）を取得。
↓const text = addTarget.firstElementChild.innerText; で、divの最初の子要素を取得。
index.js
const completeButton = document.createElement("button");
completeButton.innerText = "完了";
completeButton.addEventListener("click", () => {
//完了リストに追加する要素
const addTarget = completeButton.parentNode;
const text = addTarget.firstElementChild.innerText;
console.log(text);
}
