JavaScriptのappendChild()メソッド徹底解説！基本的な使い方と実践例

JavaScriptのappendChild()メソッドは、親ノードの末尾に新しい要素を追加するためのメソッドです。特に、<ul>や<ol>などのリストに<li>項目を動的に追加する場面でよく使われます。複数の項目を追加したい場合は、appendChild()を必要な回数だけ呼び出すことになります。

JavaScriptのappendChild()とは？

Webページにはテキストのリスト、画像のリスト、カスタム要素のリストなど、さまざまなリストがあふれています。通常、リストを作成するときはHTMLで直接記述しますが、appendChild()メソッドを使えば、この作業を効率化できます。このメソッドを使うと、リストやblockquoteなどの任意のWeb要素の末尾に、新しい項目をプログラムから追加できるのです。

appendChild()は、親ノードの末尾に子ノードを追加するメソッドです。ここでいう「ノード」とは、HTMLのDOM（Document Object Model）を構成するすべての要素を指します。

基本構文は以下の通りです。

parent.appendChild(child);

「parent」は子要素を追加したい対象の要素、「child」は親の末尾に追加したい要素を表します。

対象の要素を取得するには、getElementById()やquerySelector()といった「ゲッター」系メソッドを使用します。あるいは、JavaScriptで新しいHTML要素を作成し、それを「child」として渡すことも可能です。

例えば、スコーンのレシピ一覧であれば、そのリストは複数のノードで構成されます。リスト形式なので、ノードはおそらく<li>タグになるでしょう。また、<img>タグを含む親の<div>があれば、その子ノードは<img>要素になります。appendChild()の最も一般的な用途は、<ul>や<ol>のようなリストに<li>タグを追加することです。

appendChild()の実践例：生徒名簿アプリを作ってみよう

それでは、実際にappendChild()を使ったアプリケーションを作成してみましょう。ここでは、10年生のクラスの生徒名簿を表示するサイトを構築します。作業は次の3つのステップに分けて進めます。

フロントエンドのセットアップ
要素の選択と作成
appendChild()による要素の追加

ステップ1：フロントエンドのセットアップ

まず、生徒名簿を表示するための基本的なHTMLファイルを作成します。「index.html」というファイルを作り、以下のコードを貼り付けてください。

<!DOCTYPE html>
<html>
    <head>
        <title>10年生 クラス名簿</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>10年生 クラス名簿</h1>
        <ul>
        </ul>
    </body>
    <script src="scripts.js"></script>
</html>

これはシンプルなHTMLドキュメントで、タイトルと空のリスト（<ul>タグ）が含まれています。

次に、ページの見た目を整えるために、「styles.css」ファイルにスタイルを追加しましょう。

body {
    background-color: #f7f7f7;
    margin: auto;
    width: 50%;
}

このCSSでは、background-colorプロパティでページ背景を薄いグレーに設定し、<body>タグ内のコンテンツをページ中央に配置しています。レイアウト構造の詳細については、CSSボックスモデルに関するガイドも参考にしてください。

現時点ではリスト項目が何もないため、ブラウザで開いても見出しだけが表示される状態です。ここにJavaScriptを組み込んでいきましょう。

ステップ2：要素の選択と作成

リストに項目を追加する前に、まず操作対象となる要素を選択する必要があります。「scripts.js」ファイルを作成し、以下のコードを記述してください。

const students = document.querySelector("ul");

このコードは、ページ上の<ul>タグ（つまりリスト本体）を選択しています。続いて、リストに追加する新しい要素を作成します。

let li = document.createElement("li");
li.textContent = "Steven";

このコードは、「Steven」というテキストを持つ<li>要素を生成します。あとは、この新しく作成した要素をリストに追加するだけです。

ステップ3：appendChild()メソッドで要素を追加する

appendChild()メソッドを使うことで、ノードに要素を追加できます。scripts.jsの末尾に以下のコードを追加してください。

students.appendChild(li);

これで、先ほど作成したリスト項目がリストに追加されました。ブラウザでページを開くと、「Steven」という1件の項目が表示されているはずです。

さらにコードを効率化するために、生徒を追加する関数を作成してみましょう。こうすることで、同じcreateElementのコードを繰り返し書かずに済みます。

createElementとtextContentの部分を、以下の関数に置き換えてください。

function createStudent(name) {
    let li = document.createElement("li");
    li.textContent = name;
    return li;
}

この関数は、呼び出されるたびに新しい<li>要素を生成して返します。次に、appendChild()の呼び出しをこの関数を使う形に変更します。

students.appendChild(createStudent("Mark"));
students.appendChild(createStudent("Chloe"));
students.appendChild(createStudent("Louise"));

これにより、Mark、Chloe、Louiseという3人の生徒が追加されます。index.htmlを再度開いて、変更が反映されているか確認してみましょう。クラス名簿に3つの名前が表示されているはずです。

appendChild()で別のリストへ項目を移動する

appendChild()メソッドは、既存の要素を別のリストへ移動させることにも使えます。これは意外と知られていない便利な機能です。先ほどの例を修正して、この挙動を確認してみましょう。

まず、HTMLを変更して2つのリストを持たせます。

...
    <body>
        <h1>10年生 クラス名簿</h1>
        <h3>テスト受験済み</h3>
        <ul id="sat_test">
        </ul>
        <h3>テスト未受験</h3>
        <ul id="has_not_sat_test">
        </ul>
    </body>
...

「テスト受験済み（sat_test）」と「テスト未受験（has_not_sat_test）」の2つのリストを作成しました。次に、JavaScriptファイルを更新して、2つのリストを選択し、3人の生徒を作成します。

const sat_test = document.getElementById("sat_test");
const has_not_sat_test = document.getElementById("has_not_sat_test");

function createStudent(name) {
    let li = document.createElement("li");
    li.textContent = name;
    return li;
}

has_not_sat_test.appendChild(createStudent("Mark"));
has_not_sat_test.appendChild(createStudent("Chloe"));
has_not_sat_test.appendChild(createStudent("Louise"));

ここではgetElementById()メソッドを使って2つのリストをそれぞれ選択し、Mark、Chloe、Louiseの3人を「テスト未受験」リストに追加しています。

Louiseはテストを受け終わったので、彼女の名前をもう一方のリストへ移動させましょう。ここではappendChild()メソッドと、lastChildプロパティを組み合わせて使用します。

var louise = has_not_sat_test.lastChild;
sat_test.appendChild(louise);

このコードは、「テスト未受験」リストの最後の子要素をlastChildで取得し、それを「テスト受験済み」リストに追加しています。DOM上で同じ要素を別の親に追加すると、元の場所から自動的に移動される点がポイントです。

HTMLファイルをブラウザで開くと、最初は全員が「テスト未受験」リストに入っていますが、その後Louiseの名前だけが「テスト受験済み」リストへ移動していることが確認できます。

まとめ

appendChild()メソッドは、要素の末尾に新しいノードを追加するためのメソッドです。リストだけでなく、例えば<section>タグの中に<div>要素を追加するなど、あらゆる種類の要素に対して使用できます。

理解を深めるために、ぜひチャレンジ課題に取り組んでみてください。appendChild()を使って、ページ読み込み時に4枚の画像をグリッド状に表示する仕組みを実装してみましょう。

JavaScriptの学習方法やおすすめのオンライン教材について詳しく知りたい方は、「JavaScript学習ガイド」も合わせてチェックしてみてください。

JavaScriptのif...else文を徹底解説：初心者向けステップバイステップガイド

jQueryのclick()メソッドでクリックイベントをトリガーする方法

JavaScriptのappendChild()メソッド徹底解説！基本的な使い方と実践例
JavaScriptのappendChild()メソッドは、親ノードの末尾に新しい要素を追加するためのメソッドです。特に、<ul>や<ol>などのリストに<li>項目を動的に追加する場面でよく使われます。複数の項目を追加したい場合は、appendChild()を必要な回数だけ呼び出すことになります。 JavaScriptのappendChild()とは？ Webページにはテキストのリスト、画像のリスト、カスタム要素のリストなど、さまざまなリストがあふれています。通常、リストを作成するときはHTMLで直接記述しますが、appendChild()メソッドを使
JavaScriptでリスト要素の兄弟ノードを取得する方法｜nextSiblingプロパティの使い方
JavaScriptには、リスト要素の兄弟を取得するためのプロパティとして node.nextSibling が用意されています。リスト内の任意の要素さえ特定できれば、その兄弟要素を簡単に見つけ出すことができます。この記事では、nextSibling プロパティの基本構文と、実際のコード例を使った使い方をわかりやすく解説します。基本構文node.nextSibling;例1：最初の要素の兄弟を取得する次の例では、3つのリスト要素（li）を用意しています。nextSibling プロパティを使って、最初の要素の兄弟要素を取得し、その結果を出力画面に表示します。<html> <b