replaceChildの罠

replaceChildって、DOM同士をスワップしてくれるのかと思ったら、単に入れ替えなんね。removeChildとappendChildを同時にやってくれるだけで。

つーわけで、DOM同士のスワップはこんな感じに一回複製しないとダメみたい。

<div id="sample">
<span id="id1">1</span>
<span id="id2">2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<script type="text/javascript">
function replaceElement() {
	
	var elem = document.getElementById("sample");
	var ele1 = document.getElementById("id1");
	var ele1_ = ele1.cloneNode(true);
	var ele2 = document.getElementById("id2");
	var ele2_ = ele2.cloneNode(true);
	
	ele2.parentNode.replaceChild(ele1_, ele2);
	ele1.parentNode.replaceChild(ele2_, ele1);
}
</script>
<button onclick="replaceElement()">要素を置き換え</button>