JavaScriptで新しい要素を追加してみよう！（ToDoリスト風）

完成イメージ

input欄に文字を入力し、追加ボタンをクリックしたら、その下に入力した内容が箇条書きで表示される

今回のテーマ

createElement() と appendChild() を使って、JavaScriptで新しいリスト項目を作って画面に追加してみましょう。

目的

入力欄の値を .value で取得する
document.createElement() で新しい要素を作成する
appendChild() でHTMLに追加する

作成ファイル・保存場所

js-domフォルダに以下のファイルを作成してください。

ファイル名	内容
js-dom05.html	ボタンクリックの動作練習用HTML/js
js-dom__05.html	ステップアップ練習用HTML/js

練習するHTMLは下記からコピーしてください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>ToDoリストを追加してみよう</title>
    <style>
        body {
            font-family: sans-serif;
            padding: 2em;
        }

        input[type="text"] {
            padding: 0.5em;
            width: 200px;
        }

        button {
            padding: 0.5em 1em;
            margin-left: 0.5em;
        }

        ul {
            margin-top: 1em;
            list-style-type: disc;
            padding-left: 1.5em;
        }

        li {
            margin-bottom: 0.5em;
        }
    </style>
</head>

<body>
    <h1>ToDoリストを追加してみよう</h1>

    <p>
        <label for="todo-input">やること：</label>
        <input type="text" id="todo-input" placeholder="例：宿題をする">
        <button id="add-btn">追加</button>
    </p>

    <ul id="todo-list">
        <!-- ここにリスト項目が追加されます -->
    </ul>

    <script>
        
    </script>
</body>

</html>

👉 JavaScriptは <script> タグ内に直接記述してください（内部JS）

チェックポイント

入力したテキストが <li> 要素として表示されているか？
JavaScriptだけでリスト項目が増えていくか？
空の入力は追加されないようになっているか？

JavaScript基礎トレーニング

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>ToDoリストを追加してみよう</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 2em;
    }

    input[type="text"] {
      padding: 0.5em;
      width: 200px;
    }

    button {
      padding: 0.5em 1em;
      margin-left: 0.5em;
    }

    ul {
      margin-top: 1em;
      list-style-type: disc;
      padding-left: 1.5em;
    }

    li {
      margin-bottom: 0.5em;
    }
  </style>
</head>

<body>
  <h1>ToDoリストを追加してみよう</h1>

  <p>
    <label for="todo-input">やること：</label>
    <input type="text" id="todo-input" placeholder="例：宿題をする">
    <button id="add-btn">追加</button>
  </p>

  <ul id="todo-list">
    <!-- ここにリスト項目が追加されます -->
  </ul>

  <script>
    const input = document.getElementById('todo-input');
    const button = document.getElementById('add-btn');
    const list = document.getElementById('todo-list');

    button.addEventListener('click', () => {
      const text = input.value.trim();

      if (text !== '') {
        const li = document.createElement('li');
        li.textContent = text;
        list.appendChild(li);
        input.value = ''; // 入力欄をクリア
      }
    });
  </script>
</body>

</html>

`.trim()` の役割とは？

.trim() は 文字列の前後にある空白（スペースや改行）を取り除く JavaScriptのメソッドです。

const text = input.value.trim();

入力欄の値	`.trim()` の結果
`"宿題をする"`	`"宿題をする"`
`" 宿題をする "`	`"宿題をする"`
`" "`	`""`（空文字）

ユーザーがうっかり「スペースだけ」入力してボタンを押してしまっても、.trim() を使えばそのスペースが削除されて 空文字として扱われるため、次のtext !== '' の条件で弾くことができます。

.trim() を使うと、入力の前後にある「半角スペース」や「改行」などを自動的に取り除けます。ただし、全角スペース（　）は .trim() では削除できないため、より厳密にチェックしたいときは正規表現を使います。

if (text !== ”) とは？

このコードは、「入力欄が空でないときだけ、追加する」という条件をチェックしています。

if (text !== '') {
  // 入力が空でなければ追加する
}

上記のコードがない状態だと、入力欄が空のままでもボタンを押すと、空っぽのリスト（<li>）が追加されてしまいます。それを防ぐために、

text !== '' → 入力された文字列が「空ではない」
この条件が「true（正しい）」ときだけ、追加処理を実行します。

`!==` とは？

!== は「値が等しくない」という意味です。
text !== '' は「textの中身が空文字ではないとき」となります。

`createElement()`とは？

JavaScriptで 新しくHTMLの要素を作る メソッドです。

たとえば、次のように書くと

const li = document.createElement('li');

この時点で、まだ画面には何も表示されていませんが、
<li> 要素が JavaScript の中で「用意された状態」になります。

作った要素に中身（テキスト）を入れるには？

li.textContent = '買い物に行く';

このように .textContent を使うと、
「中身が入った li 要素」が JavaScript上で完成します。

appendChild() とは？

todoList.appendChild(li);

これは、<ul> の中に li 要素を「子要素として追加する」という意味になります。

JavaScriptでは…

要素を作る → createElement('li')
中身を入れる → li.textContent = '〜';
HTMLに追加する → appendChild(li) ← ← ← ココが表示の決め手！

よくある間違い・・・

const li = document.createElement('li');
li.textContent = 'テスト';

このままでは、画面には何も表示されません！
画面に出すには必ず appendChild() が必要です。

JavaScriptステップアップトレーニング

さらに各項目の右に [削除] ボタンが付き、押すとその項目だけが消える機能を追加。文字を入力し、追加ボタンをクリックすると、下に箇条書きで行うことリストが表示。その横に削除ボタンを配置し、そのボタンをクリックしたら、１行単位で、入力したリストが削除しましょう

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>ToDoリスト（削除ボタン付き）</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 2em;
    }

    input[type="text"] {
      padding: 0.5em;
      width: 200px;
    }

    button {
      padding: 0.5em 1em;
      margin-left: 0.5em;
    }

    ul {
      margin-top: 1em;
      list-style-type: disc;
      padding-left: 1.5em;
    }

    li {
      margin-bottom: 0.5em;
    }

    .delete-btn {
      margin-left: 1em;
      font-size: 0.9em;
      background-color: #fdd;
      border: 1px solid #f88;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <h1>ToDoリストを追加してみよう（削除ボタン付き）</h1>

  <p>
    <label for="todo-input">やること：</label>
    <input type="text" id="todo-input" placeholder="例：洗濯物をたたむ">
    <button id="add-btn">追加</button>
  </p>

  <ul id="todo-list">
    <!-- ここに追加される -->
  </ul>

  <script>
    const input = document.getElementById('todo-input');
    const addBtn = document.getElementById('add-btn');
    const todoList = document.getElementById('todo-list');

    addBtn.addEventListener('click', () => {
      const text = input.value.trim();

      if (text !== '') {
        const li = document.createElement('li');
        li.textContent = text;

        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = '削除';
        deleteBtn.classList.add('delete-btn');

        // 削除ボタンのイベント処理
        deleteBtn.addEventListener('click', () => {
          todoList.removeChild(li);
        });

        li.appendChild(deleteBtn); // li の中に削除ボタンを追加
        todoList.appendChild(li);  // ul の中に li を追加
        input.value = '';          // 入力欄をリセット
      }
    });
  </script>
</body>

</html>

li 要素の中に button を入れている＝ネスト構造
removeChild() は「親要素から子要素を削除」するメソッド
addEventListener() を要素作成後に追加することで、動的に作った要素にもイベントをつけられる