DOM

HTML：

<div>
 <span id="childSpan">foo bar</span>
</div>

JavaScript：

//ID も属性も内容も持たない空要素を生成
var sp1 = document.createElement("span");

//生成したノードに id 属性 'newSpan' を付与
sp1.setAttribute("id", "newSpan");

//テキストノードを生成
var sp1_content = document.createTextNode("新しい span 要素");

//生成したテキストノードを先の空要素の子ノードとして配置
sp1.appendChild(sp1_content);

// 置換に先んじ、参照を代入
var sp2 = document.getElementById("childSpan"); // 既存の置換対象ノード
var parentDiv = sp2.parentNode; // 置換対象ノードの親要素

// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換
parentDiv.replaceChild(sp1, sp2);

上記 HTML コード実行後のノードは以下の様になります：

<div>
 <span id="newSpan">新しい span 要素</span>
</div>

HTML：

<SPAN id=IdTest>[SPAN要素。テキスト<B>[B要素]</B>テキスト]</SPAN>

JavaScript：

N=document.createElement('I');  //I 要素を生成。
N.innerText="[I要素]";          //そのテキストを設定。
NL=IdTest.childNodes;            //IdTest の子ノード リストを得る。
D=IdTest.replaceChild(N, NL[0]); //IdTest の子ノード 0 番目に作成した要素に置き換える。
DA=IdTest.outerHTML;  //全体表示。
	//＝[string]：<span id="IdTest"><i>[I要素]</i><b>[B要素]</b>テキスト]</span>

取得した内容：D

＝[object]：[object Text]
wholeText＝[string]：[SPAN要素。テキスト
assignedSlot＝[object]：null
splitText＝[function]：function splitText() { [native code] }
data＝[string]：[SPAN要素。テキスト
…

JavaScript： HTMLを表示しなおして、

NL=IdTest.childNodes;                //IdTest の子ノード リストを得る。
D=IdTest.replaceChild(NL[2], NL[0]); //IdTest の子ノード 0 番目に、同、子ノード 2 番目に置き換える。
DA=IdTest.outerHTML;  //全体表示。
	//＝[string]：<span id="IdTest">テキスト]<b>[B要素]</b></span>

ノードの移動ができた。