親HTML要素.appendChild()

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

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

sample_appendChild.html

<ul id="list">
	<li>項目1</li>
	<li>項目2</li>
</ul>
<ul id="members"></ul>
<div id="card-container"></div>

sample_appendChild.js

// パターン1: 基本的な使い方
var list = document.getElementById("list");
var newItem = document.createElement("li");
newItem.textContent = "項目3";
list.appendChild(newItem);
// 結果: 項目1, 項目2, 項目3

// パターン2: 配列からHTML要素を動的に生成する
var members = ["user1", "user2", "user3", "user4", "user5"];
var memberList = document.getElementById("members");
members.forEach(function(name) {
	var li = document.createElement("li");
	li.textContent = name;
	memberList.appendChild(li);
});

// パターン3: 複数の属性を持つ複雑なHTML要素を追加する
var container = document.getElementById("card-container");
var pilots = [
	{ name: "user1", unit: "unit_00", id: "u1" },
	{ name: "user2", unit: "unit_01", id: "u2" },
	{ name: "user3", unit: "unit_02", id: "u3" }
];
pilots.forEach(function(pilot) {
	var card = document.createElement("div");
	card.id = pilot.id;
	card.className = "pilot-card";
	card.setAttribute("data-unit", pilot.unit);

	var nameEl = document.createElement("strong");
	nameEl.textContent = pilot.name;
	card.appendChild(nameEl); // strong要素をdivの中に追加

	var unitEl = document.createElement("span");
	unitEl.textContent = " (" + pilot.unit + ")";
	card.appendChild(unitEl); // span要素をdivの中に追加

	container.appendChild(card); // 完成したcard要素をcontainerに追加
});

// パターン4: appendChildの戻り値を活用する
var newLi = document.createElement("li");
newLi.textContent = "追加後も操作できます";
var appendedEl = list.appendChild(newLi);
appendedEl.style.color = "red"; // 戻り値（追加されたHTML要素）を操作できる

サンプルページはこちら

ミス1: 既存要素をappendChildすると移動する（コピーではない）

すでにDOMに存在するHTML要素を別の場所にappendChildすると、元の位置から削除されて新しい位置に移動します。コピーしたい場合はcloneNode(true)で複製してから追加してください。

var item = document.getElementById("item");
var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");
list1.appendChild(item);
list2.appendChild(item); // NG: list1から消えてlist2に移動してしまう

修正後は次の通りです。

var item = document.getElementById("item");
var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");
list1.appendChild(item);
list2.appendChild(item.cloneNode(true)); // OK: 複製してからappendChildする

ミス2: appendChildに文字列を直接渡そうとする

appendChildはHTML要素（Elementオブジェクト）を受け取るメソッドです。文字列を渡すとエラーになります。テキストを追加したい場合はtextContentを使うか、createTextNode()でテキストノードを作成してから渡してください。

var list = document.getElementById("list");
list.appendChild("item_a"); // NG: 文字列は渡せない

修正後は次の通りです。

var list = document.getElementById("list");
var li = document.createElement("li");
li.textContent = "item_a"; // OK: 要素を作ってからappendChildする
list.appendChild(li);

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

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

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