【JavaScript】【DOM操作】appendChild( )でHTML要素を追加

#書き方

[親要素].appendChild(追加要素);

#サンプルコード
以下のようなリストがあるとします。

example.html

<ul id="menuList">
    <li>coffee</li>
    <li>tea</li>
</ul>

↑に<li>greenTea</li>を以下のコードで追加します。

example.js

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

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

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

■結果
親要素の最後の子要素として追加されます。

example.html

<ul id="menuList">
　　<li>coffee</li>
　　<li>tea</li>
　　<li>greenTea</li>
</ul>

#参照
MDN web docs