[JavaScript][L1] テキストボックスのコンテンツ(div)を別コンテンツ(div)に転記(生成)する

# 環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

# ソースコード外観
## HTML
~~~html:index.html
<!DOCTYPE html>
<html>
  <head>
    <title>ToDo(JS)</title>
    <meta charset="UTF-8" />
  </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 id="incomplete-list">
        <!-- 完成系の例としてliタグ以下を作成している
        <li>
          <div class="list-row">
            <p class="todo-item">ToDoです</p>
            <button>完了</button>
            <button>削除</button>
          </div>
        </li> -->
      </ul>
    </div>
    <script src="./index.mjs" type="module"></script>
  </body>
</html>
~~~

## JavaScript
~~~js:index.mjs
import "./styles.css";

const onClickAdd = () => {
  // テキストボックスの値を取得し、初期化する
  const inputText = document.getElementById("add-text").value;
  document.getElementById("add-text").value = "";

  // li生成
  const li = document.createElement("li");

  // div生成
  const div = document.createElement("div");
  div.className = "list-row";

  // p生成
  const p = document.createElement("p");
  p.className = "todo-item";
  p.innerText = inputText;

  // button(完了)タグ生成
  const completeButton = document.createElement("button");
  completeButton.innerText = "完了";
  completeButton.addEventListener("click", () => {
    alert("完了");
  });

  // button(削除)タグ生成
  const deleteButton = document.createElement("button");
  deleteButton.innerText = "削除";
  deleteButton.addEventListener("click", () => {
    alert("削除");
  });

  // liタグの子要素に各要素を設定
  div.appendChild(p);
  div.appendChild(completeButton);
  div.appendChild(deleteButton);
  li.appendChild(div);

  // id="incomplete-list"の`ul`タグに子要素を設定した`li`タグを追加
  document.getElementById("incomplete-list").appendChild(li);
};

document.getElementById("add-button").addEventListener("click", onClickAdd);
~~~

# 手順
1. HTMLファイルにテキストボックスとなる`div`tagに`input`tagと`button`tagを設定する
    ~~~html:index.html
    <input id="add-text" placeholder="ToDoを入力" />
    <button id="add-button">追加</button>
    ~~~

1. `テキストボックスのコンテンツ(div)を別コンテンツ(div)に転記(生成)する`関数`onClickAdd`を定義する
    ~~~js:index.mjs
    const onClickAdd = () => {
    };
    ~~~

1. JSファイルにHTMLファイルの`add-button`がclickされた際に、`onClick`関数が動くようにする
    ~~~js:index.mjs
    document.getElementById("add-button").addEventListener("click", onClickAdd);
    ~~~

1. テキストボックスの値を取得し、初期化する
    ~~~js:index.mjs
    const inputText = document.getElementById("add-text").value;
    document.getElementById("add-text").value = "";
    ~~~

1. li生成
    ~~~js:index.mjs
    const li = document.createElement("li");
    ~~~

1. div生成
    ~~~js:index.mjs
    const div = document.createElement("div");
    div.className = "list-row";
    ~~~

1. p生成
    ~~~js:index.mjs
    const p = document.createElement("p");
    p.className = "todo-item";
    p.innerText = inputText;
    ~~~

1. button(完了)タグ生成
    ~~~js:index.mjs
    const completeButton = document.createElement("button");
    completeButton.innerText = "完了";
    // 仮の`click`イベントとして`alert("完了")`で設定している = clickされた時の関数はここに記載していく
    completeButton.addEventListener("click", () => {
        alert("完了");
    });
    ~~~

1. button(削除)タグ生成
    ~~~js:index.mjs
    deleteButton.innerText = "削除";
    // 仮の`click`イベントとして`alert("削除")`で設定している = clickされた時の関数はここに記載していく
    deleteButton.addEventListener("click", () => {
        alert("削除");
    });
    ~~~

1. liタグの子要素に各要素を設定
完成例として作成しているhtmlを参考にすると良い
    ~~~js:index.mjs
    div.appendChild(p);
    div.appendChild(completeButton);
    div.appendChild(deleteButton);
    li.appendChild(div);
    ~~~
    ※HTMLファイルから一部抜粋
    ~~~html:
    <!-- 完成例としてliタグ以下を作成している
        <li>
            <div class="list-row">
                <p class="todo-item">ToDoです</p>
                <button>完了</button>
                <button>削除</button>
            </div>
        </li> -->
    ~~~
1. id="incomplete-list"の`ul`タグに子要素を設定した`li`タグを追加
    ~~~js:index.mjs
    document.getElementById("incomplete-list").appendChild(li);
    ~~~

## Tips
`JavaScript`からHTMLにアクセスできるように、識別が必要な`tag`には`id`を追加する。

# 参考リンク
- [【何が違うの？】idとclassの3つの違いや使い分けについて解説](https://dezasuta.com/columns/id-class/)
- [Document: getElementById() メソッド](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById)
- [Document: createElement() メソッド](https://developer.mozilla.org/ja/docs/Web/API/Document/createElement)
- [EventTarget: addEventListener() メソッド](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
- [Node: appendChild() メソッド](https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild)