【JavaScript】指定した要素に子要素を追加するappendChildメソッドを解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 JavaScriptで指定した要素に子要素を追加するappendChildメソッドについて

  • appendChildメソッドとは
  • appendChildメソッドを使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows10

appendChildメソッドとは

appendChildメソッドとは、呼び出している要素を親として、引数に指定した要素を親要素の子要素のリストの最後に追加して、追加した子要素を返すメソッドです。

使い方は以下になります。

変数resultには、追加した【子要素】が返され【親要素】の子要素のリストの最後に【子要素】が追加されます。

では、次の章で実際に使ってみます。

appendChildメソッドを解説するプログラムの概要

appendChildメソッドを解説するプログラムでは、

  • HTML
  • JavaScript

の2ファイルを使います。

HTML内でリストを作成しておきます。
JavaScriptで、li要素を作成しappendChildメソッドを使ってリストに追加して表示させます。

フォルダ構成は以下のようになっています。
appendChildメソッドを解説するフォルダ構成

HTMLサンプルプログラム

HTMLで外部のJavaScriptを読み込むやり方とリスト表すol要素については、以下の記事をご参考ください。

JavaScriptサンプルプログラム

  • createElementメソッド
  • getElementByIdメソッド
  • innerHTMLプロパティ

については、こちらの記事をご参考ください。

実行結果

作成したHTMLをブラウザで開きます。
JavaScriptのappendChildメソッドの実行確認

appendChildメソッドでリストの項目が追加できているとが確認できました。

まとめ:appendChildメソッドを使ってみよう

以上がJavaScriptのappendChildメソッドについての解説でした!

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました