Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

JavaScript辞典

トップページ
JavaScript辞典
親HTML要素.appendChild()

親HTML要素.appendChild() 対応: DOM Level 1（1998）

指定したHTML要素を親要素の最後の子要素として追加します。主に『document.createElement()』で作成したHTML要素をDOMに挿入する際に使用します。

構文

親要素.appendChild(追加する要素);

引数

引数	概要
追加する要素	親要素の末尾に追加したいHTML要素（Elementオブジェクト）を指定します。

戻り値

追加されたHTML要素（引数で渡したHTML要素そのもの）を返します。

サンプルコード

<ul id="list">
	<li>項目1</li>
	<li>項目2</li>
</ul>

var list = document.querySelector("#list");

// 新しいHTML要素を作成して追加します。
var newItem = document.createElement("li");
newItem.textContent = "項目3";
list.appendChild(newItem);
// 結果: 項目1, 項目2, 項目3

// 複数のHTML要素を連続して追加します。
var fruits = ["りんご", "みかん", "ぶどう"];
fruits.forEach(function(name) {
	var li = document.createElement("li");
	li.textContent = name;
	list.appendChild(li);
});

概要

『親HTML要素.appendChild()』はHTML要素をDOMに追加するための基本的なメソッドです。追加先のHTML要素の末尾（最後の子要素の後）に挿入されます。

注意点として、すでにDOMに存在するHTML要素を別の場所に『親HTML要素.appendChild()』すると、元の位置から削除されて新しい位置に移動します。コピーではなく移動になるため、同じHTML要素を複数の場所に配置したい場合は『cloneNode(true)』でHTML要素を複製してから追加してください。

末尾ではなく特定の位置に挿入したい場合は『insertBefore()』を使用してください。