【入門編】JavaScriptによるインライン要素の動的生成 – HTML実践ガイド

JavaScriptでWebページを「動かす」！DOM操作の第一歩、インライン要素の生成術

こんにちは！Web制作の世界へようこそ。

「あらかじめHTMLに書いておくのではなく、ボタンを押したときに『ポコッ』と新しいリンクや文字を出現させることはできないの？」

結論から言うと、もちろんできます！ しかも、これができるようになると、Webページは「ただの紙芝居」から「ユーザーと対話するアプリケーション」へと一気に進化します。

今日は、そんな魔法のような「DOM操作」の基礎を、身近な例えを交えながら一緒に紐解いていきましょう。

—

専門用語で「DOM（ドム）」なんて言われると身構えてしまいますが、イメージは「Webページの設計図」だと思ってください。

JavaScriptを使うということは、この設計図をこっそり書き換えて、新しいパーツを現場に届ける「大工さん」になるようなものです。

今回使う道具は、主にこの2つです。
1. `document.createElement`：工場で新しいパーツ（要素）を作る。
2. `appendChild`：現場の指定した場所に、そのパーツを「よいしょ！」と取り付ける。

この流れ、なんだかお買い物の準備に似ていませんか？まずはお店で商品を選んで（作成）、家に持ち帰って棚に飾る（挿入）。この一連の流れをコードで体験してみましょう。

—

今回は、「ボタンを押すと、文章の中にリンク付きの文字が新しく追加される」という仕組みを作ってみます。

今日のニュース：

`textContent`: これが一番安全で簡単な「中身の書き換え」です。`innerHTML`という方法もありますが、セキュリティの観点から、まずはこの`textContent`を愛用することをおすすめします。
`appendChild`の力: これを使うと、`container`という箱の「一番最後」に新しい要素が追加されます。まるで積み木を足していくような感覚ですね。

—

「コードを書いたけど、動かない…」そんな時、初心者の頃は焦りますよね。でも大丈夫、よくあるパターンは決まっています。

`getElementById` で指定したID名が、HTML側と一文字も違わず合っているか確認してみてください。全角スペースが混じっている、なんていうのはベテランでもよくやる「あるある」です。

`appendChild` は「どこに追加するか」が肝心です。先ほどの例なら `container` ですが、もし挿入したい箱の名前を間違えていたら、パーツはどこにも行き場を失ってしまいます。

もし動かなくても、ブラウザの「検証ツール（F12キー）」を開いてみてください。赤い文字でエラーが出ていたら、それがあなたの先生です。「どこが違ったよ！」とヒントを教えてくれますから、怖がらなくて大丈夫ですよ。

—