親HTML要素.replaceChild() / insertBefore()

// 子要素を別のHTML要素に置き換えます。
親要素.replaceChild(新しい要素, 古い要素);

// 指定した子要素の直前にHTML要素を挿入します。
親要素.insertBefore(挿入する要素, 基準となる子要素);

sample_replaceChild.html

<ul id="list">
	<li id="item1">岡部倫太郎</li>
	<li id="item2">牧瀬紅莉栖</li>
	<li id="item3">椎名まゆり</li>
</ul>
<ol id="steps">
	<li id="step1">手順1</li>
	<li id="step2">手順2</li>
	<li id="step3">手順3</li>
</ol>

sample_replaceChild.js

var list = document.getElementById("list");

// パターン1: replaceChild() で特定の子要素を置き換える
var newItem = document.createElement("li");
newItem.textContent = "橋田至";
var oldItem = document.getElementById("item2"); // 牧瀬紅莉栖を橋田至で置き換えます。
var replaced = list.replaceChild(newItem, oldItem);
console.log(replaced.textContent); // 『牧瀬紅莉栖』と出力されます。（戻り値は古いHTML要素）

// パターン2: insertBefore() で先頭に挿入する
var insertItem = document.createElement("li");
insertItem.textContent = "阿万音鈴羽（先頭に追加）";
var item1 = document.getElementById("item1");
list.insertBefore(insertItem, item1); // item1の直前に挿入します。

// パターン3: insertBefore() の第2引数にnullを指定すると末尾に追加される
var lastItem = document.createElement("li");
lastItem.textContent = "鈴羽（末尾に追加）";
list.insertBefore(lastItem, null); // appendChild() と同じ動作です。

// パターン4: 既存のHTML要素を別の位置に移動する（コピーではなく移動になります）
var steps = document.getElementById("steps");
var step1 = document.getElementById("step1");
steps.insertBefore(step1, null); // 手順1を末尾に移動します（先頭→末尾）。

サンプルページはこちら

上記のコードを実行すると、HTMLは以下のように変化します。

<!-- 実行前 -->
<ul id="list">
	<li id="item1">項目1</li>
	<li id="item2">項目2</li>
	<li id="item3">項目3</li>
</ul>

<!-- replaceChild() 後 -->
<ul id="list">
	<li id="item1">項目1</li>
	<li>新しい項目</li>
	<li id="item3">項目3</li>
</ul>

<!-- insertBefore() 後 -->
<ul id="list">
	<li>先頭に追加</li>
	<li id="item1">項目1</li>
	<li>新しい項目</li>
	<li id="item3">項目3</li>
</ul>

『親HTML要素.replaceChild()』は既存の子要素を新しいHTML要素に置き換えるメソッドです。第1引数に新しいHTML要素、第2引数に置き換えたい既存の子要素を指定します。戻り値として置き換えられた古いHTML要素が返されるため、必要に応じて再利用できます。

『親HTML要素.insertBefore()』は指定した子要素の直前にHTML要素を挿入するメソッドです。『親HTML要素.appendChild()』が末尾にしか追加できないのに対し、『親HTML要素.insertBefore()』は任意の位置に挿入できます。第2引数に『null』を指定した場合は末尾に追加されるため、『親HTML要素.appendChild()』と同じ動作になります。

どちらのメソッドも、すでにDOMに存在するHTML要素を指定すると元の位置から移動します。コピーではなく移動になるため、同じHTML要素を複数の場所に配置したい場合は『HTML要素.cloneNode()』で複製してから操作してください。