【JavaScript】クリックで要素を追加の流れを徹底解説
水色の「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);
});
li
要素にしたい
追加する新しい Item は、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
に、textContent
でli
要素の中に入れたいテキストを指定します。
itemCount
は数字なので、これで「Item5」「Item6」「Item7」のように連番で Item が出せそうですね。
item.textContent = `Item${itemCount}`;
しかし今のままでは画面上に Item が表示されません。画面表示(HTML 要素を追加する)ために、最後の作業があとひとつ残っています。
myList
の子要素として追加したい
子要素に追加したい…そんなときは親をまず探します。
最初に親をlist
で定義したので、これを使いましょう。
親に子要素を追加したい、追加したい内容は連番の Item です。を JavaScript で表すと、以下のようになります。
list.appendChild(item);
まとめ
クリックされたら〜の書き方はとてもよく使います。
連番で数字を出したい時は、まず最初の個数を数えてあげるのがポイントです。
慣れてしまえばこんなに丁寧に考えなくても済むのですが、慣れるまでが大変だしこれ書いている人の頭の中どうなってんの!?と思うことばかりだったので、丁寧に分解して書いてみました。
JavaScriptで挫折しそうになっている方に届いたら嬉しいです。
Discussion