javaScript(JS)替換節(jié)點(diǎn)實(shí)現(xiàn)思路介紹
更新時(shí)間：2013年04月17日 14:24:17 作者：
獲取要替換的節(jié)點(diǎn),這種方法只適用于IE瀏覽器以及適用于各種瀏覽器的寫(xiě)法，感興趣的朋友可以參考下哈
復(fù)制代碼 代碼如下:
<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>
您可能感興趣的文章:
- javascript將DOM節(jié)點(diǎn)添加到文檔的方法實(shí)例分析
- JavaScript動(dòng)態(tài)添加style節(jié)點(diǎn)的方法
- Js為表單動(dòng)態(tài)添加節(jié)點(diǎn)內(nèi)容的方法
- js實(shí)現(xiàn)點(diǎn)擊添加一個(gè)input節(jié)點(diǎn)
- JavaScript DOM節(jié)點(diǎn)添加示例
- javascript Firefox與IE 替換節(jié)點(diǎn)的方法
- Javascript刪除指定元素節(jié)點(diǎn)的方法
- JavaScript中對(duì)DOM節(jié)點(diǎn)的訪問(wèn)、創(chuàng)建、修改、刪除
- javascript刪除一個(gè)html元素節(jié)點(diǎn)的方法
- JS動(dòng)態(tài)增加刪除UL節(jié)點(diǎn)LI及相關(guān)內(nèi)容示例
- 初學(xué)js 新節(jié)點(diǎn)的創(chuàng)建 刪除 的步驟
- JS實(shí)現(xiàn)添加,替換,刪除節(jié)點(diǎn)元素的方法
相關(guān)文章
通過(guò)JS來(lái)判斷頁(yè)面控件是否獲取焦點(diǎn)
本篇文章主要介紹了通過(guò)JS來(lái)判斷頁(yè)面控件是否獲取焦點(diǎn)的方法。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
微信小程序開(kāi)發(fā)之實(shí)現(xiàn)自定義Toast彈框
Toast相信對(duì)于利用微信小程序開(kāi)發(fā)的朋友們來(lái)說(shuō)都不陌生，有時(shí)候官方的樣式并不能滿(mǎn)足業(yè)務(wù)要求，怎么辦呢，當(dāng)然有解決辦法了。有一個(gè)插件可以直接幫我們完成WeToast，這篇文章主要給大家介紹了微信小程序開(kāi)發(fā)之實(shí)現(xiàn)自定義Toast彈框的相關(guān)資料，需要的朋友可以參考下。2017-06-06
javascript設(shè)計(jì)模式之中介者模式學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之中介者模式學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript實(shí)現(xiàn)無(wú)阻塞加載的常用方式
在 JavaScript 中,無(wú)阻塞加載（Non-blocking Loading）是優(yōu)化網(wǎng)頁(yè)性能的關(guān)鍵技術(shù),通過(guò)避免腳本阻塞頁(yè)面渲染和其他資源的加載,提升用戶(hù)體驗(yàn),以下是實(shí)現(xiàn)無(wú)阻塞加載的常用方法及示例,需要的朋友可以參考下2025-03-03
JavaScript判斷輸入值是否為正整數(shù)(判斷變量為數(shù)字)
在項(xiàng)目開(kāi)發(fā)中,有時(shí)候需要使用JavaScript驗(yàn)證用戶(hù)輸入的是否為正整數(shù),這篇文章主要給大家介紹了關(guān)于JavaScript判斷輸入值是否為正整數(shù)(判斷變量為數(shù)字)的相關(guān)資料,需要的朋友可以參考下,2023-11-11
使用javascript實(shí)現(xiàn)ListBox左右全選,單選,多選,全請(qǐng)
使用javascript實(shí)現(xiàn)ListBox左右全選,單選,多選,全請(qǐng)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
js數(shù)據(jù)向上翻滾_數(shù)據(jù)滾動(dòng)
方便做一些問(wèn)題提交等宣傳效果，多用于文字滾動(dòng)2008-10-10
JavaScript接口的實(shí)現(xiàn)三種方式(推薦)
這篇文章主要介紹了JavaScript接口的實(shí)現(xiàn)三種方式，有注釋法，檢查屬性法和鴨式辨行法，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
快速理解 JavaScript 中的 LHS 和 RHS 查詢(xún)的用法
本篇文章主要介紹了快速理解 JavaScript 中的 LHS 和 RHS 查詢(xún)的用法，有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
JavaScript實(shí)現(xiàn)文本相似度對(duì)比
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文本相似度對(duì)比，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-06-06