要素を作って追加する
このレッスンで分かること
createElementはタグ名を渡すと、まだどこにも属していない新品の要素を返しますappendで親に足すまで、つくった要素は画面に出ません
掴めるのは、すでに書いてある要素だけ
ここまでの 3 回は、HTML に書いてある要素を掴んで書きかえてきました。querySelector は、無いものは掴めません。趣味をもう 1 つ増やしたいと思っても、いまの道具では index.html を開いて li を手で書き足すしかありません。
その先へ進む道具が createElement です。タグ名を渡すと、そのタグの要素が 1 つできます。< や > は書きません。
JavaScript
const newHobby = document.createElement("li");
console.log(newHobby); // <li></li>できたばかりの要素は、中身も class も無い空っぽの状態です。ここに設定を足していきます。
JavaScript
newHobby.className = "hobby-item";
newHobby.textContent = "パンを焼く";class を className で付けているのは、まだ何の class も付いていない新品だからです。前回のとおり、既存の要素をいじるときは classList、新品に最初の class を与えるときは className が素直です。文字を入れるのは textContent で、ここも前々回のままです。新しく覚えるのは createElement の 1 つだけです。
つくっただけでは、画面に出ない
上の 3 行を書いても、画面には何も現れません。要素は変数の中に浮いているだけで、まだどの親にも属していないからです。ここが最初のつまずきどころで、しかもエラーは出ません。
親になる要素を掴んで append を呼ぶと、渡したものがその親のいちばん最後の子として入ります。
JavaScript
const hobbyList = document.querySelector(".hobby-list");
hobbyList.append(newHobby); // ここではじめて画面に出るappend は複数まとめて渡せますし、文字列もそのまま渡せます。入れ子の要素も、この 1 つで組み立てられます。
JavaScript
const row = document.createElement("li");
const label = document.createElement("strong");
label.textContent = "2027 年";
row.append(label, " Web の仕事に移りたい");
document.querySelector(".history-list").append(row);古い記事でよく見る appendChild も同じ役目ですが、渡せるものが少なく、行数も増えます。
| 書き方 | 渡せるもの | 一度に渡せる数 |
|---|---|---|
append | 要素と文字列 | 何個でも |
appendChild | 要素だけ | 1 つだけ |
組み立ての順番は自由です。ただし、先に中身を組み立ててから最後に 1 回だけ親へ足すほうが、ブラウザが画面を描き直す回数が減ります。数が増えるほど差が出るので、この順番を習慣にしておくと得です。
同じ要素は、木の 1 か所にしか置けない
つくった要素を 2 つの親に append しても、コピーはされません。元の場所から引っこ抜かれて移動します。
JavaScript
const footerLinks = document.querySelector(".footer-links");
hobbyList.append(newHobby); // 趣味のリストに入る
footerLinks.append(newHobby); // 趣味から消えて、こちらへ移る同じ見た目を 2 か所に出したいときは、createElement からもう 1 つつくります。数をまとめてつくる場面では、この性質がそのまま効いてきます。
よくある間違い
appendを書き忘れる — いちばん多い間違いです。エラーは出ず、ただ何も出てこないだけです。「動かない」ではなく「出てこない」ときは、まずappendの行があるかを見ます- タグ名に記号を付ける —
createElement("<li>")もcreateElement(".hobby-item")もエラーになります。渡すのはタグ名だけです - class を付ける先を間違える — 見た目が当たらないときは、class を付けた要素と CSS が狙っている要素がずれています。
.hobby-itemの指定はliに付けないと効きません
課題
document.createElement("article")でカードをつくり、classNameを"work-card"にするh3をつくり、textContentを"JavaScript のメモ帳"にするpをつくり、classNameを"work-meta"、textContentを"2026 年 / 0 回表示"にするh3とpをカードに入れ、.work-listにカードをappendする