溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關javascript如何替換節點的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
在JavaScript中，可以利用replaceChild()方法替換節點，該方法的作用就是可將某個子節點替換為另一個，新節點可以是已存在的，或者是新創建的，語法為“node.replaceChild(newnode,oldnode)”。
本教程操作環境：windows10系統、javascript1.8.5版、Dell G3電腦。
javascript如何替換節點
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 h2 = document.getElementsByTagName("h2")[0]; //獲取一級標題的引用
var h3 = documeng.createElement("h3"); //創建二級標題元素并引用
red.replaceChild(h3, h2); //把一級標題替換為二級標題
}演示發現，當使用新創建的二級標題替換一級標題之后，原來的一級標題所包含的標題文本已經不存在了。這說明替換節點的操作不是替換元素名稱，而是替換其包含的所有子節點以及其包含的所有內容。
同樣的道理，如果替換節點還包含子節點，則子節點將一同被插入到被替換的節點中。可以借助 replaceChild() 方法在文檔中使用現有的節點替換另一個存在的節點。
示例如下：
<html>
<head>
<meta charset="utf-8">
<title>123</title>
</head>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<p id="demo">單擊按鈕替換列表中的第一項。</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction(){
var textnode=document.createTextNode("Water");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}
</script>
<p>首先創建一個文本節點。<br>然后替換第一個列表中的第一個子節點。</p>
<p><strong>注意:</strong>這個例子只將文本節點的文本節點“Coffee”替換為“Water”,而不是整個LI元素,這也是替換節點的一種備選。</p>
</body>
</html>輸出結果：
點擊按鈕后：
感謝各位的閱讀！關于“javascript如何替換節點”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
