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

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

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

<ul id="list">
	<li id="item1">項目1</li>
	<li id="item2">項目2</li>
	<li id="item3">項目3</li>
</ul>

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

// replaceChild() で項目2を新しいHTML要素に置き換えます。
var newItem = document.createElement("li");
newItem.textContent = "新しい項目";
var oldItem = document.querySelector("#item2");
list.replaceChild(newItem, oldItem);

// insertBefore() で項目1の前にHTML要素を挿入します。
var insertItem = document.createElement("li");
insertItem.textContent = "先頭に追加";
var item1 = document.querySelector("#item1");
list.insertBefore(insertItem, item1);

上記のコードを実行すると、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()』で複製してから操作してください。