JS replaceChild()方法：替換節點

JavaScript replaceChild() 方法可以將某個子節點替換為另一個。用法如下：

nodeObject.replaceChild(new_node, old_node)

其中引數 new_node 為指定新的節點，old_node 為被替換的節點。如果替換成功，則返回被替換的節點；如果替換失敗，則返回 null。

範例1

以上範例為基礎重寫指令碼，新建一個二級標題元素並替換掉紅色盒子中的一級標題元素。

var ok = document.getElementById("ok");  //獲取按鈕元素的參照
ok.onclick = function () {  //為按鈕註冊一個滑鼠單擊事件處理常式
    var red = document.getElementById("red");  //獲取紅色盒子的參照
    var h1 = document.getElementsByTagName("h1")[0];  //獲取一級標題的參照
    var h2 = documeng.createElement("h2");  //建立二級標題元素並參照
    red.replaceChild(h2, h1);  //把一級標題替換為二級標題
}

演示發現，當使用新建立的二級標題替換一級標題之後，原來的一級標題所包含的標題文字已經不存在了。這說明替換節點的操作不是替換元素名稱，而是替換其包含的所有子節點以及其包含的所有內容。

同樣的道理，如果替換節點還包含子節點，則子節點將一同被插入到被替換的節點中。可以借助 replaceChild() 方法在文件中使用現有的節點替換另一個存在的節點。

範例2

在下面範例中使用藍盒子替換掉紅盒子中包含的一級標題元素。此時可以看到，藍盒子原來顯示的位置已經被刪除顯示，同時被替換元素 h1 也被刪除。

var ok = document.getElementById("ok");  //獲取按鈕元素的參照
ok.onclick = function () {  //為按鈕註冊一個滑鼠單擊事件處理常式
    var red = document.getElementById("red");  //獲取紅色盒子的參照
    var blue= document.getElementById("blue");  //獲取藍色盒子的參照
    var h1 = document.getElementsByTagName("h1")[0];  //獲取一級標題的參照
    red.replaceChild(blue, h1);  //把紅盒子中包含的一級標題替換為藍盒子
}

範例3

replaceChild() 方法能夠返回被替換掉的節點參照，因此還可以把被替換掉的元素給找回來，並增加到文件中的指定節點中。針對上面範例，使用一個變數 del_h1 儲存被替換掉的一級標題，然後再把它插入到紅色盒子前面。

var ok = document.getElementById("ok");  //獲取按鈕元素的參照
ok.onclick = function () {  //為按鈕註冊一個滑鼠單擊事件處理常式
    var red = document.getElementById("red");  //獲取紅色盒子的參照
    var blue= document.getElementById("blue");  //獲取藍色盒子的參照
    var h1 = document.getElementsByTagName("h1")[0];  //獲取一級標題的參照
    var del_h1 = red,replaceChild(blue, h1);  //把紅盒子中包含的一級標題替換為藍盒子
    red.parentNode.insertBefore(del_h1, red);  //把替換掉的一級標題插入到紅盒子前面
}