【JavaScript】appendChild()で指定した親要素の末尾にHTML要素を追加する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2022年12月23日に投稿されました。)

Javascriptで作成した新しいHTML要素を追加する方法としてappendChild()があります。

appendChild()とは指定した親要素内の末尾に子要素として挿入するメソッドであり、指定したノードの子ノードとして追加されるようになります。

子ノードとして追加されるため、存在しない親ノードを指定するとエラーになってしまうので注意してください。

また、for文のような繰り返し処理やを使用することで一気に複数のHTML要素を追加することができます。

そのため、「このタイミングでのこの場所にHTML要素を追加したい」と思った場合はappendChild()を使用しましょう。

今回はJavaScriptのappendChild()で指定した親要素の末尾にHTML要素を追加する方法について紹介していきます。

この記事はこんな方におすすめ
・作成したHTML要素を指定した要素の子要素として追加したい場合
・既存のHTML要素を別の場所に移動させたい場合

appendChild()とは

appendChild()とは指定した要素内の末尾に子要素として挿入するメソッドになります。

指定したノードの子ノードとして追加されます。

appendChild()の書き方

appendChild()の書き方は下記のようになります。

親ノードの後ろにappendChild()と追記し、括弧の中にパラメータを指定することで使用することができます。

appendChild()のパラメータ

appendChild()のパラメータは下記のようになります。

  1. 子ノード(必須):
    挿入したいHTML要素を子ノードとして指定する

appendChild()は必須パラメータとして、子ノードを指定します。

appendChild()の返り値

appendChild()の返り値は「追加したHTML要素」になります。

appendChild()で指定した親要素の末尾にHTML要素を追加するサンプルコード

appendChild()で指定した親要素の末尾にHTML要素を追加するサンプルコードについてご紹介します。

ここでは、下記の2つのパターンでappendChild()を使用します。

  1. 指定する子ノードが存在する場合
  2. 指定する子ノードが存在しない場合

指定する子ノードが存在する場合

指定する子ノードが存在する場合にappendChild()を使用します。

● index.html

● main.js

実行結果

指定する子ノードが存在する場合にappendChild()を使用した結果

appendChild()によって指定した要素内の末尾に子要素として挿入されています。

そのため、「divエリア」の下に「新規要素」が表示されています。

指定する子ノードが存在しない場合

指定する子ノードが存在しない場合にappendChild()を使用します。

● index.html

● main.js

実行結果

指定する子ノードが存在しない場合にappendChild()を使用した結果

指定する子ノードが存在しない場合はappendChild()でHTML要素を追加することができません。

また、ログを確認するとエラーが発生しています。

ログ結果

指定する子ノードが存在しない場合にappendChild()を使用した結果(ログ画面)

子ノードとして指定している「new_element」が存在していないため、エラーとなっています。

appendChild()で複数のHTML要素を一気に追加する方法

appendChild()でHTML要素を追加しますが、ひとつずつ挿入するのではなく、一気にまとめて追加したい時があるかと思います。

そのため、ここではappendChild()で複数の要素を一気に追加する下記の2つ方法をご紹介します。

  1. for文を使用する
  2. createDocumentFragment()を使用する

for文を使用する

1つ目はfor文を使用する方法です。

for文とは繰り返し処理を行う文法となります。

そのため、for文の中にappendChild()を使用することでHTML要素を一気にまとめて追加することができるようになります。

● index.html

● main.js

実行結果

for文とappendChild()で複数の要素を一気に追加した結果

for文よってappendChild()の処理を繰り返し行い、複数の要素を一気に追加しています。

そのため、「新規要素 + 数値」が連続で表示されています。

createDocumentFragment()を使用する

そして、2つ目はcreateDocumentFragment()を使用する方法です。

createDocumentFragment()とは、別のDOMツリー上を作成することができるメソッドになります。

createDocumentFragment()はブラウザによって表示されているDOMツリーとは切り離されたDOMツリーを作成します。

そのため、切り離されたDOMツリーに要素を追加することで、HTML要素を一気にまとめて追加することができるようになります。

● index.html

● main.js

実行結果

createDocumentFragment()とappendChild()で複数の要素を一気に追加した結果

createDocumentFragment()で作成した要素をappendChild()で追加することで、複数の要素を一気に追加しています。

そのため、「新規要素」が5つ表示されています。

appendChild()で既存のHTML要素を別の位置に移動する場合

appendChild()は新しいHTML要素を追加するだけでなく、既存のHTML要素を別の位置に移動することもできます。

● index.html

● main.js

実行結果

appendChild()で既存のHTML要素を別の位置に移動した結果

appendChild()によって既存のHTML要素が別の位置に移動しています。

そのため、「divエリア1」にいた「既存要素」が「divエリア2」に移動して表示されています。

appendChild()を使用した実際のケース

appendChild()を使用した実際のケースについてご紹介します。

例えば、appendChild()を使用してラップ機能のあるストップウォッチを作成してみます。

● index.html

● style.css

● main.js

実行結果

appendChild()でラップ機能のあるストップウォッチを作成した結果

appendChild()を使用することでストップウォッチにラップ機能が追加されています。

そのため、ラップボタンを押すと押した瞬間のタイムがラップとして画面に表示されています。

jQueryで指定した要素の末尾にHTML要素を追加する場合

jQueryで指定した要素の末尾にHTML要素を追加する場合はappend()を使用します。

こちらはjQueryのメソッドであるため、jQueryファイルを呼び出す必要があります。

● index.html

● main.js

実行結果

append()によって指定する要素の前にHTML要素を挿入しています。

そのため、「新規要素」が追加されて表示されています。

HTML要素を指定した位置に追加するメソッドの一覧

JavaScriptではappendChild()以外にもHTML要素を指定した位置に追加するメソッドが存在します。

そのため、ここではHTML要素を指定した位置に追加するメソッドの一覧についてご紹介します。

insertBefore()

insertBefore()とは、指定した親要素内の先頭に子要素として挿入するメソッドになります

● index.html

● main.js

実行結果

insertBefore()で指定した位置にHTML要素を追加した結果

insertBefore()によって指定した親要素内の先頭に子要素として追加されています。

そのため、「新規要素」が「divエリア」の上に表示されています。

もし、insertBefore()について詳しく知りたい場合は下記の記事をご参考ください。

before()

before()とは、指定した要素の前に別のHTML要素を挿入するメソッドになります。

● index.html

● main.js

実行結果

before()で指定した要素の前に別のHTML要素を挿入した結果

before()によって指定した要素の前に別のHTML要素が追加されています。

そのため、「新規要素」が「divエリア」の上に表示されています。

after()

after()とは、指定した要素の後ろに別のHTML要素を挿入するメソッドになります。

● index.html

● main.js

実行結果

after()で指定した要素の後ろに別のHTML要素を挿入した結果

after()によって指定した要素の後ろに別のHTML要素が追加されています。

そのため、「新規要素」が「divエリア」の下に表示されています。

insertAdjacentHTML()

insertAdjacentHTML()とは文字列を要素として挿入するメソッドとなります。

● index.html

● main.js

実行結果

insertAdjacentHTML()で指定した位置にHTML要素を追加した結果

insertAdjacentHTML()によって文字列がHTML要素として追加されています。

そのため「新規要素1」が「divエリア」の上に、「新規要素2」が「divエリア」の下に表示されています。

まとめ

⚫︎ appendChild()とは指定した要素内の末尾に子要素として挿入するメソッドである

⚫︎ appendChild()は下記のパラメータを指定して使用する
・子ノード(必須)

⚫︎ 子ノードが存在する場合にappendChild()を指定すると、指定した要素の子要素として追加される

⚫︎ 子ノードに存在しない場合にappendChild()を指定すると、要素の追加は行われない

⚫︎ appendChild()は既存のHTML要素を指定した場所に移動することができる

⚫︎ appendChild()で複数の要素を一気に追加する方法として下記の2つがある
・for文を使用する
・createDocumentFragment()を使用する

⚫︎ jQueryで指定した要素の末尾にHTML要素を追加するにはappend()を使用する

⚫︎ HTML要素を指定した位置に追加するメソッドはappendChild()以外にも下記のようなメソッドがある
・insertBefore()
(指定した親要素内の先頭に子要素として挿入するメソッド)
・before()
(指定した要素の前に別のHTML要素を挿入するメソッド)
・after()
(指定した要素の後ろに別のHTML要素を挿入するメソッド)
・insertAdjacentHTML()
(文字列を要素として挿入するメソッド)