JavaScriptのappendChildメソッドの使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのappendChildメソッドの使い方について解説しています。appendChildメソッドを使うと、既存のHTMLドキュメントに新しく要素を追加することが出来ます。さらに既存の要素をコピーしたり、HTML要素を新規に追加することも出来ます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのappendChildメソッドの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

appendChildメソッドの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

appendChildメソッドとは

JavaScriptでプログラミングを行う際、動的にWebサイトに要素を追加したい場合があると思います。そのような時に便利なのがappendChild メソッドです。要素の集合体をノードといいます。

appendChildメソッドを使うと、特定の親ノードの子ノードの最後にノードを追加することができます。なお、追加しようとしたノードが既に存在していたら、既存のノードが新しいノードで置き換わります。これについてはサンプルプログラムで確認します。

 

appendChildメソッドの書き方

appendChild メソッドの書き方は以下のとおりです。

var child = element.appendChild(child);

戻り値は追加した子要素です。appendChildメソッドについて、詳しくは以下の記事を参考にしてください。

mozilla.org-appendChild

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

今回のサンプルプログラムでは、 appendChildメソッドを使って親要素に子要素を追加する方法を確認します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>sample1</title>
  <style>
    div {
      margin: 10px;
      padding: 10px;
      border: medium solid blue;
    }
  </style>
</head>
<body>
  <button onclick="addChildCreate()">子要素を追加(新規)</button><br>
  <button onclick="addChildCopy()">子要素を追加(コピー)</button><br>
  <button onclick="addChildExist()">子要素を追加(既存要素)</button><br>
  <div id="parent">親要素
    <div id="child1">子要素1</div>
    <div id="child2">子要素2</div>
    <div id="child3">子要素3</div>
  </div>
  <script type="text/javascript">
    var parent = document.getElementById("parent");
    var idx = 4;

    // 子要素を追加(新規)
    function addChildCreate() {
      var child = document.createElement("div");
      addChild(child);
    }

    // 子要素を追加(コピー)
    function addChildCopy() {
      // 先頭の子要素をコピーする
      var child = document.getElementById("parent").firstElementChild.cloneNode(true);
      addChild(child);
    }

    // 子要素を追加(既存の要素)
    function addChildExist() {
      // 先頭の子要素を取得する
      var child = document.getElementById("parent").firstElementChild;
      addChild(child);
    }

    // 子要素を追加(共通)
    function addChild(child) {
      child.id = "child" + idx;
      child.innerText = "子要素" + idx;
      idx++;
      child = parent.appendChild(child);
      console.log(child);
    }
  </script>
</body>
</html>

 

追加する要素は3パターンです。また、実際に要素を追加する関数はaddChildとして共通化してあります。

  • addChildCreate:createElementメソッドで新規作成した要素を使用
  • addChildCopy:cloneNodeメソッドで既存の要素をコピーした要素を使用
  • addChildExist:単に既存の要素を指定しただけで使用

実行結果は以下のようになります。新規とコピーは新たに要素が追加されるのに対し、既存要素は既存のノードが新しいノードで置き換わることが確認できます。

筆者プロフィール

この記事を監修してくれた方

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。