前回、JavaScriptでのHTMLの書き換えについて解説いたしました。
【初心者向け】JavaScriptでHTMLの書き換え方法を解説！
今回は、書き換えの次の段階である「HTMLの追加方法」について
要素の追加方法
要素の前に追加する
要素の後に追加する
要素の中に追加する
について解説いたします。
要素の追加方法
要素を追加する方法も置き換えの時と同じですね。
まずは基本的な仕組みをシンプルに理解することが大切していきましょう。
基本的な仕組みというのは、
- 「追加する要素」を用意して「どこに追加するか」を指定する。
です。
追加する要素を用意する
特定のタグの要素を作成する方法です。
|
1 |
document.createElement(タグ名) |
例えば、pタグ要素を作成する場合はこのように書きます。
|
1 2 3 4 5 6 7 |
document.createElement('p') // 実際には下記のように変数に代入して使うことが多いです。 let add = document.createElement('p'); //さらに用意したpタグにテキスト文字を追加する場合はこうします。 add.textContent = "追加するテキスト文字"; |
上記で変数addの中に追加する要素やテキストを格納しました。
要素の前に追加する
ここからは追加する方法のご紹介です。
まずは、例えばこういったHTMLがあるとします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<body> <div id="content"> //① <h1 class="headline">見出しです。</h1> <p class="sample">本文です。</p> <ul class="list"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> <div id="card"> <h1 class="headline--card">見出しです。</h1> <p class="sample--card">本文です。</p> <ul id="list--card"> //③ <li>リストA</li> <li>リストB</li> <li>リストC</li> </ul> </div> </div> <script type="text/javascript"></script> </body> |
ブラウザではこのように表示されます。
まずは「特定の要素の前に追加する」方法ですが、まずは特定の要素を指定しましょう。
書き換えの際に使ったプロパティを使います。
まずは上記HTML内の②箇所である「id要素contentのdivタグ」の前に追加します。
|
1 |
let sample = document.getElementById('content'); |
これで、変数sampleにpタグの要素を格納しました。
そして、この要素の前に追加するにはinsertBefore()メソッドを使います。以下が使い方です。
|
1 |
親要素.insertBefore(追加する要素, 基準となる要素) |
では、実際に上記HTMLのscriptタグ内に下記のJavaScriptを書いてみましょう。
|
1 2 3 4 5 6 7 8 9 |
// 追加する要素を用意します。 let add = document.createElement("p"); add.textContent = "divタグの前に追加しました！"; // 基準となる要素を指定します。 let sample = document.getElementById("content"); // 基準となる要素の前に用意した要素を追加します。 document.body.insertBefore(add, sample); //② |
結果的にブラウザには下記のようになるはずです。
思い通りの位置にpタグ要素が追加できましたね。
要素の後に追加する
今度は特定要素の後に追加する方法です。
insertAfter()というメソッドを使う…となると思われた方もいるかもしれませんが、じつはそんなソメッドは存在しません。
同じくinsertBeforeメソッドを使いますが、書き方は以下のようになります。
|
1 |
親要素.insertBefore(追加する要素, 基準となる要素.nextSibling) |
先ほどの例のJavaScriptの記述内②の箇所を以下のように書き換えてみましょう。
|
1 |
document.body.insertBefore(add, sample.nextSibling); |
正しくdivタグの後ろに追加されました。
要素の中に追加する
最後に要素の中に追加する方法です。
HTMLの例の中の③のulタグの中に追加していきましょう。
親要素の中に追加する場合はappendChildメソッドを使用します。書き方はこうですね。
|
1 |
親要素.appendChild(追加する要素) |
では、実際に上記HTMLのscriptタグ内に下記のJavaScriptを書いてみましょう。
|
1 2 3 4 5 6 7 8 9 |
// 追加する要素を用意します。 let add = document.createElement("li"); add.textContent = "リスト（追加分）"; // 基準となる要素を指定します。 let sample = document.getElementById("list--card"); // 基準となる要素の前に用意した要素を追加します。 let result = sample.appendChild(add); |
結果的にブラウザには下記のようになるはずです。
まとめ
今回はJavaScriptでの要素の追加について
要素の追加方法
要素の前に追加する
要素の後に追加する
要素の中に追加する
について解説いたしました。
もちろんあくまでも基本ですのでもっと多くの応用方法がありますので、徐々に使いこなせるようにしていきましょう。
