在JavaScript中，我們可以使用replaceChild()方法來實現替換節點。
語法：
obj.replaceChild(new,old)
說明：
obj，表示被替換節點的父節點；
new，表示替換後的新節點；
old，需要被替換的舊節點。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function replace() {
//獲取兩個文本框的值
var tag = document.getElementById("tag").value;
var txt = document.getElementById("txt").value;
//獲取p元素
var lvye = document.getElementById("lvye");
//根據兩個文本框的值創建新節點
var e = document.createElement(tag);
var t = document.createTextNode(txt);
e.appendChild(t);
document.body.replaceChild(e,lvye);
}
</script>
</head>
<body>
<p id="lvye"> 學習網</p>
<hr />
輸入標簽：<input id="tag" type="text"/><br />
輸入文本：<input id="txt" type="text"/><br />
<input type="button" value="替換" onclick="replace()" />
</body>
</html>
在浏覽器預覽效果如下：
分析：
當我們在第1個文本框輸入“h1”，第2個文本框輸入字符串“JavaScript”，然後點擊“替換按鈕”，浏覽器預覽效果如下：
由於id為lvye的p元素父節點為body，所以根據替換節點的語法“obj.replaceChild(new,old)”應該判斷得出obj應該是body元素。大家一定要理解好這一句代碼“document.body.replaceChild(e,lvye);”。
也就是說，想要實現替換節點，就必須找到3點：
（1）新節點；
（2）被替換的子節點；
（3）被替換子節點的父節點；
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function replace() {
//獲取兩個文本框的值
var tag = document.getElementById("tag").value;
var txt = document.getElementById("txt").value;
//獲取p元素
var lvye = document.getElementById("lvye");
//根據兩個文本框的值創建新節點
var e = document.createElement(tag);
var t = document.createTextNode(txt);
e.appendChild(t);
document.getElementById("wrap").replaceChild(e,lvye);
}
</script>
</head>
<body>
<div id="wrap">
<p id="lvye"> 學習網</p>
<hr />
輸入標簽：<input id="tag" type="text"/><br />
輸入文本：<input id="txt" type="text"/><br />
<input type="button" value="替換" onclick="replace()" />
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
由於id為lvye的p元素的父節點不是body了，也就是說使用“document.body.replaceChild(e,lvye);”這句就行不通了。因此必須重新獲取p元素的父節點才能使用replaceChild()方法，不然浏覽器就會報錯。大家要好好對比這2個例子理解一下。