appendChild()の使い方

appendChild()は、特定の親ノードの子ノードリストの末尾にノードを追加します。
親要素.appendChild(追加したい要素)という形で使われます。
親要素の末尾に要素が追加されなす。
例えばulタグにliタグを追加する場合、下記のようにulタグの末尾に追加されます。

コード例

まず次のようなli要素が２つあるul要素を用意します。ul要素の id="list" です。

<ul id="list">
    <li>リスト1</li>
    <li>リスト2</li>
</ul>

上のリストのli要素を１つ増やして、下のようなリストを作ります。

<ul id="list">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

JavaScriptコード

// 親要素
var list = document.getElementById('list');

// 追加する要素を作成
var li = document.createElement('li');
li.innerHTML = 'リスト3';

// 末尾に追加
list.appendChild(li);

まず、親要素（この場合は ul 要素）を取得し、 次に追加する li 要素を作成します。最後に appendChild() メソッドで追加します。

https://step-learn.com/article/javascript/098-appendchild.html