JavaScript appendChild()メソッド

概要: このチュートリアルでは、JavaScriptのappendChild()メソッドを使用して、指定された親ノードの子ノードのリストの最後にノードを追加する方法を学習します。

JavaScript appendChild()メソッドの紹介

appendChild()は、Nodeインターフェースのメソッドです。appendChild()メソッドを使用すると、指定された親ノードの子ノードのリストの最後にノードを追加できます。

以下は、appendChild()メソッドの構文を示しています。

parentNode.appendChild(childNode);Code language: CSS (css)

このメソッドでは、childNodeは、指定された親ノードに追加するノードです。appendChild()は、追加された子ノードを返します。

childNodeがドキュメント内の既存ノードへの参照である場合、appendChild()メソッドは、childNodeを現在の位置から新しい位置に移動します。

JavaScript appendChild()メソッドの例

appendChild()メソッドの使用例をいくつか見てみましょう。

1) 基本的なappendChild()の例

次のHTMLマークアップがあるとします。

<ul id="menu">
</ul>Code language: HTML, XML (xml)

次の例では、appendChild()メソッドを使用して、3つのリストアイテムを<ul>要素に追加します。

function createMenuItem(name) {
    let li = document.createElement('li');
    li.textContent = name;
    return li;
}
// get the ul#menu
const menu = document.querySelector('#menu');
// add menu item
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));
Code language: JavaScript (javascript)

仕組み

まず、createMenuItem()関数は、createElement()メソッドを使用して、指定された名前を持つ新しいリストアイテム要素を作成します。
次に、querySelector()メソッドを使用して、idがmenuである<ul>要素を選択します。
次に、createMenuItem()関数を呼び出して新しいメニューアイテムを作成し、appendChild()メソッドを使用してメニューアイテムを<ul>要素に追加します。

出力

<ul id="menu">
    <li>Home</li>
    <li>Services</li>
    <li>About Us</li>
</ul>Code language: HTML, XML (xml)

まとめ

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JavaScript appendChild() Demo</title>
</head>
<body>
    <ul id="menu">
    </ul>
    
    <script>
        function createMenuItem(name) {
            let li = document.createElement('li');
            li.textContent = name;
            return li;
        }
        // get the ul#menu
        const menu = document.querySelector('#menu');
        // add menu item
        menu.appendChild(createMenuItem('Home'));
        menu.appendChild(createMenuItem('Services'));
        menu.appendChild(createMenuItem('About Us'));
    </script>
</body>
</html>
Code language: HTML, XML (xml)

2) ドキュメント内のノードの移動例

2つのアイテムリストがあると仮定します。

<ul id="first-list">
    <li>Everest</li>
    <li>Fuji</li>
    <li>Kilimanjaro</li>
</ul>

<ul id="second-list">
    <li>Karakoram Range</li>
    <li>Denali</li>
    <li>Mont Blanc</li>
</ul>
Code language: HTML, XML (xml)

次の例では、appendChild()を使用して、最初のリストから最初の要素を2番目のリストに移動します。

// get the first list
const firstList = document.querySelector('#first-list');
// take the first child element
const everest = firstList.firstElementChild;
// get the second list
const secondList = document.querySelector('#second-list');
// append the everest to the second list
secondList.appendChild(everest)
Code language: JavaScript (javascript)

仕組み

まず、querySelector()メソッドを使用して、id（first-list）で最初の要素を選択します。
次に、最初のリストから最初の要素を選択します。
次に、querySelector()メソッドを使用して、id（second-list）で2番目の要素を選択します。
最後に、appendChild()メソッドを使用して、最初のリストから最初の要素を2番目のリストに追加します。

移動前後のリストを以下に示します。

まとめ

appendChild()メソッドを使用して、指定された親ノードの子ノードのリストの最後にノードを追加します。
appendChild()は、既存の子ノードをドキュメント内の新しい位置に移動するためにも使用できます。

クイズ

このチュートリアルは役に立ちましたか？