#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);
  }