JavaScript: appendChild() 要素を末尾に追加する
作成した要素を末尾に追加する場合は appendChild()メソッドを使用します。
書式
親要素.appendChild(追加要素)
親要素に対して appendChild() メソッドを実行します。 そして、親要素の最後の子要素として追加されます。
コード例
まず次のようなli要素が2つあるul要素を用意します。ul要素の id="list" です。
<ul id="list">
<li>リスト1</li>
<li>リスト2</li>
</ul>
上のリストのli要素を1つ増やして、下のようなリストを作ります。
<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() メソッドで追加します。