親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 = ["綾波レイ", "碇シンジ", "惣流アスカ", "葛城ミサト", "渚カヲル"];
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: "綾波レイ", unit: "零号機", id: "rei" },
	{ name: "碇シンジ", unit: "初号機", id: "shinji" },
	{ name: "惣流アスカ", unit: "弐号機", id: "asuka" }
];
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要素）を操作できます。

サンプルページはこちら

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

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

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