🐿️

【JavaScript】クリックで要素を追加の流れを徹底解説

2024/10/25に公開

水色の「Itemを追加する」ボタンを押すと、Itemが増えます。

ボタンを押したら HTML 要素を追加する、は JavaScript の学習を始めると絶対に触る部分かと思います。
超初心者の頃、なんでこの書き方をしたら要素が増えるのかよくわからず、半分暗記して書いていました。
今は暗記ではなく仕組みを理解できたので、詳しく内容を解説します。
特にこんな方におすすめです。

  • JavaScript 初心者
  • JavaScript はコピペでいつも済ませている
  • JavaScript がなにをどうしているのかよく分からない

今回、HTML と CSS では特殊なことをしていないので、JS の解説だけしています。

コード

<div class="l-container">
  <ul id="myList">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  </ul>
  <button id="addButton">Itemを追加する</button>
</div>
.l-container {
  max-width: 400px;
  margin: 10% auto;
}

#myList li {
  list-style: disc;
  font-weight: bold;
  margin-bottom: 3%;
}

#addButton {
  background-color: skyblue;
  font-size: 18px;
  color: #fff;
  padding: 0.5em 1em;
  border-radius: 100vw;
  font-weight: bold;
}
// ボタン
const addButton = document.getElementById("addButton");
// リスト(親)
const list = document.getElementById("myList");

// 最初のリストの中の子であるアイテム数を数える
let itemCount = list.children.length;
// チェック用
console.log(`最初はリストの中にItemが${itemCount}個あります。`);

addButton.addEventListener("click", () => {
  // 追加したい要素
  let item = document.createElement("li");
  itemCount++;
  item.textContent = `Item${itemCount}`;
  list.appendChild(item);
});

JS の解説

中身を一行一行、なにをしているか丁寧に解説します。

準備

今回の目的は「ボタンがクリックされたらリストの中に li 要素をひとつ追加する」でした。
javaScript で HTML 要素を操作するために、操作対象のものたちを先に準備しておきましょう。
今回用意するのは以下の 2 つです。

  • ボタン(これを押したら増える)
  • リスト(リストのひとつひとつではない、親を指定)
// ボタン
const addButton = document.getElementById("addButton");
// リスト(親)
const list = document.getElementById("myList");

まずは操作対象の 2 つを const で定義します。
リストの親を指定する理由は、のちのち操作が楽だからです。JavaScript には「親の中の子を追加する」という呪文のようなものがあるので、わざわざリストの最後のアイテムを定義する必要はありません。

既存のリストの中のアイテムの個数を数えておく

既存のアイテムの個数を数える理由は、ボタンを押して追加される Item の文字を「Item5」「Item6」「Item7」と連番にしたいからです。

人間は画面を見れば、既存のリストの中のアイテムの個数は 3 つだな、じゃあ次は Item4 が入るんだな〜とわかります。
しかし JavaScript はそれがわかりません、なのでまず「最初の個数を数えて覚えておいてね」とお願いをします。

// 最初のリストの中の子であるアイテム数を数える
let itemCount = list.children.length;

先ほど定義したlistの子要素の長さを測っておくように、と指示しました。

ここで一旦、いまのItemの個数をきちんと数えられているかconsole.logで確認しておきましょう。

// チェック用
console.log(`最初はリストの中にItemが${itemCount}個あります。`);

Chromeの拡張機能からコンソールを確認すると、きちんと数えられているのがわかります。

クリックされたら〜の処理を書く

Item を追加するボタンをクリックされたら、li 要素を追加したいです。
まずはクリックされたら〜の部分を先に書きます。

addButton.addEventListener("click", () => {
  // ここにクリックされたらやりたい動きを書く
});

クリックされたらやりたいことリスト

クリックされたらやりたい動きは、以下 3 つです。

  • 追加する新しい Item は、li要素にしたい
  • 「Item5」「Item6」「Item7」みたいに連番にしたい
  • myListの子要素として追加したい
addButton.addEventListener("click", () => {
  // 追加したい要素
  let item = document.createElement("li");
  itemCount++;
  item.textContent = `Item${itemCount}`;
  list.appendChild(item);
});

追加する新しい Item は、li要素にしたい

createElementは、後続のかっこ()で指定された HTML 要素を生成できます。今回はliを生成したいので、liを入れました。

let item = document.createElement("li");

Item5」「Item6」「Item7」みたいに連番にしたい

連番にするためには、最初の Item の個数がわからないと困ります。
さきほどlet itemCount = list.children.length;で最初の Item の個数を数えておいたので、これを活用します!

最初は Item の数が 3 で、次は Item4 を作りたいです。
ここでは Item の最初の数プラス 1 をすれば、連番が作れそうですね。

itemCount+1と書いてもいいのですが、JavaScript にはインクリメント演算子 (++) と呼ばれる書き方で同様の結果を得られる仕組みがあります。

itemCount++;
item.textContent = `Item${itemCount}`;

itemCount++;で連番用の数字を取得したら、新しく生まれるliの中身に数字を入れたいです。

myListの子要素として追加したい

createElementで作った新しいliに、textContentli要素の中に入れたいテキストを指定します。

itemCountは数字なので、これで「Item5」「Item6」「Item7」のように連番で Item が出せそうですね。

item.textContent = `Item${itemCount}`;

しかし今のままでは画面上に Item が表示されません。画面表示(HTML 要素を追加する)ために、最後の作業があとひとつ残っています。

myListの子要素として追加したい

子要素に追加したい…そんなときは親をまず探します。
最初に親をlistで定義したので、これを使いましょう。
親に子要素を追加したい、追加したい内容は連番の Item です。を JavaScript で表すと、以下のようになります。

list.appendChild(item);

まとめ

クリックされたら〜の書き方はとてもよく使います。
連番で数字を出したい時は、まず最初の個数を数えてあげるのがポイントです。
慣れてしまえばこんなに丁寧に考えなくても済むのですが、慣れるまでが大変だしこれ書いている人の頭の中どうなってんの!?と思うことばかりだったので、丁寧に分解して書いてみました。
JavaScriptで挫折しそうになっている方に届いたら嬉しいです。

Discussion