javaScript(JS)替換節(jié)點(diǎn)實(shí)現(xiàn)思路介紹

更新時間：2013年04月17日 14:24:17 作者：

獲取要替換的節(jié)點(diǎn),這種方法只適用于IE瀏覽器以及適用于各種瀏覽器的寫法，感興趣的朋友可以參考下哈

 
<title></title> 
<script type="text/javascript"> 
function createNode() { 
var pNode = document.createElement('p'); 
var tNode = document.createTextNode('煙花三月下楊州'); 
pNode.appendChild(tNode); 
document.body.appendChild(pNode); 
} 
function r() { 
var pNode = document.createElement('p'); 
var tNode = document.createTextNode('故人西辭黃鶴樓'); 
pNode.appendChild(tNode); 
//獲取要替換的節(jié)點(diǎn) 
var reNode = document.getElementsByTagName('p')[0]; 
//這種方法只適用于IE瀏覽器 
//reNode.replaceNode(pNode, reNode); 
//適用于各種瀏覽器 
reNode.parentNode.replaceChild(pNode, reNode); 
} 
function reNode() { 
var oldNode = document.getElementsByTagName('p')[0]; 
//oldNode.parentNode返回的是p節(jié)點(diǎn)的父節(jié)點(diǎn)，這里就是body 
//然后使用body節(jié)點(diǎn)的removeChild方法刪除下的oldNode節(jié)點(diǎn) 
oldNode.parentNode.removeChild(oldNode); 
} 
</script> 
</head> 
<body> 
<input id="Button1" type="button" value="創(chuàng)建節(jié)點(diǎn)" onclick="createNode()"/> 
<input id="Button2" type="button" value="替換節(jié)點(diǎn)" onclick="r()" /> 
<input id="Button3" type="button" value="刪除節(jié)點(diǎn)" onclick="reNode()" /> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

通過JS來判斷頁面控件是否獲取焦點(diǎn)
本篇文章主要介紹了通過JS來判斷頁面控件是否獲取焦點(diǎn)的方法。需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
微信小程序開發(fā)之實(shí)現(xiàn)自定義Toast彈框
Toast相信對于利用微信小程序開發(fā)的朋友們來說都不陌生，有時候官方的樣式并不能滿足業(yè)務(wù)要求，怎么辦呢，當(dāng)然有解決辦法了。有一個插件可以直接幫我們完成WeToast，這篇文章主要給大家介紹了微信小程序開發(fā)之實(shí)現(xiàn)自定義Toast彈框的相關(guān)資料，需要的朋友可以參考下。
2017-06-06
javascript設(shè)計模式之中介者模式學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計模式之中介者模式學(xué)習(xí)筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
JavaScript實(shí)現(xiàn)無阻塞加載的常用方式
在 JavaScript 中,無阻塞加載（Non-blocking Loading）是優(yōu)化網(wǎng)頁性能的關(guān)鍵技術(shù),通過避免腳本阻塞頁面渲染和其他資源的加載,提升用戶體驗(yàn),以下是實(shí)現(xiàn)無阻塞加載的常用方法及示例,需要的朋友可以參考下
2025-03-03
JavaScript判斷輸入值是否為正整數(shù)(判斷變量為數(shù)字)
在項(xiàng)目開發(fā)中,有時候需要使用JavaScript驗(yàn)證用戶輸入的是否為正整數(shù),這篇文章主要給大家介紹了關(guān)于JavaScript判斷輸入值是否為正整數(shù)(判斷變量為數(shù)字)的相關(guān)資料,需要的朋友可以參考下,
2023-11-11
使用javascript實(shí)現(xiàn)ListBox左右全選,單選,多選,全請
使用javascript實(shí)現(xiàn)ListBox左右全選,單選,多選,全請。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
js數(shù)據(jù)向上翻滾_數(shù)據(jù)滾動
方便做一些問題提交等宣傳效果，多用于文字滾動
2008-10-10
JavaScript接口的實(shí)現(xiàn)三種方式(推薦)
這篇文章主要介紹了JavaScript接口的實(shí)現(xiàn)三種方式，有注釋法，檢查屬性法和鴨式辨行法，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06
快速理解 JavaScript 中的 LHS 和 RHS 查詢的用法
本篇文章主要介紹了快速理解 JavaScript 中的 LHS 和 RHS 查詢的用法，有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
JavaScript實(shí)現(xiàn)文本相似度對比
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文本相似度對比，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-06-06