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() メソッドで追加します。

JavaScript入門