JavaScript替換元素
阿新 • • 發佈：2021-12-09
在JavaScript中，我們可以使用replaceChlid（）方法來實現替換元素。
程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替換元素</title>
<script>
window.onload = function (){
let oBtn = document.getElementById("btn");
oBtn.onclick = function (){ //為按鈕新增點選事件
//獲取body中的第一個元素
let oFirst = document.querySelector("body *:first-child");
//獲取2個文字框
let oTag = document.getElementById("tag");
let oTxt = document.getElementById("txt");
//根據2個文字框的值來建立一個新的節點
let oNewTag = document.createElement(oTag.value);
let oNewTxt = document.createTextNode(oTxt.value);
oNewTag.appendChild(oNewTxt);
document.body.replaceChild(oNewTag,oFirst);
}
}
</script>
</head>
<body>
<p>親愛的熱愛的</p>
<hr/>
輸入人物:<input id="tag" type="text"/><br>
輸入內容:<input id="txt" type="text"/><br>
<input id="btn" type="button" value="替換"/>
</body>
</html>
執行結果:
輸入內容點選替換後：
親愛的熱愛的被佟年給替換了
注意:要想實現替換元素，就必須提供3個節點：父元素,新元素,以及舊元素。