DOM節(jié)點(diǎn)的替換或修改函數(shù)replaceChild()用法實(shí)例
更新時間：2015年01月12日 10:04:27 投稿：shichen2014
這篇文章主要介紹了DOM節(jié)點(diǎn)的替換或修改函數(shù)replaceChild()用法,實(shí)例分析了replaceChild()替換DOM節(jié)點(diǎn)的使用技巧,需要的朋友可以參考下
本文實(shí)例講述了DOM節(jié)點(diǎn)的替換或修改函數(shù)replaceChild()用法。分享給大家供大家參考。具體分析如下：
DOM節(jié)點(diǎn)的替換過程：
（1）創(chuàng)建新的節(jié)點(diǎn)；
（2）找到舊的節(jié)點(diǎn)；
（3）站在父節(jié)點(diǎn)的角度，使用replaceChild(新,舊)函數(shù)來替換。
復(fù)制代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
function t(){
//思路：1.首先找到要替換的節(jié)點(diǎn)；2. 創(chuàng)建一個新的節(jié)點(diǎn)；3.找到父節(jié)點(diǎn)，在父節(jié)點(diǎn)的角度調(diào)用replaceChild(新,舊)方法
var newli = document.createElement('li');//創(chuàng)建新節(jié)點(diǎn)
var newtext = document.createTextNode('白天');//創(chuàng)建文本節(jié)點(diǎn)
newli.appendChild(newtext);
var nodeul = document.getElementsByTagName('ul')[0];//找到父節(jié)點(diǎn)
var oldli = nodeul.children[2];//找到要替換的節(jié)點(diǎn)
nodeul.replaceChild(newli,oldli);//替換
}
</script>
</head>
<body>
<div id="container">
<ul>
<li>春天</li>
<li>夏天</li>
<li>藍(lán)天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
</div>
<div id="copyul">
</div>
<hr />
<button onclick="t()" value="">節(jié)點(diǎn)的替換與修改</button>
</body>
</html>
<head>
<script type="text/javascript">
function t(){
//思路：1.首先找到要替換的節(jié)點(diǎn)；2. 創(chuàng)建一個新的節(jié)點(diǎn)；3.找到父節(jié)點(diǎn)，在父節(jié)點(diǎn)的角度調(diào)用replaceChild(新,舊)方法
var newli = document.createElement('li');//創(chuàng)建新節(jié)點(diǎn)
var newtext = document.createTextNode('白天');//創(chuàng)建文本節(jié)點(diǎn)
newli.appendChild(newtext);
var nodeul = document.getElementsByTagName('ul')[0];//找到父節(jié)點(diǎn)
var oldli = nodeul.children[2];//找到要替換的節(jié)點(diǎn)
nodeul.replaceChild(newli,oldli);//替換
}
</script>
</head>
<body>
<div id="container">
<ul>
<li>春天</li>
<li>夏天</li>
<li>藍(lán)天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
</div>
<div id="copyul">
</div>
<hr />
<button onclick="t()" value="">節(jié)點(diǎn)的替換與修改</button>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS基于cookie實(shí)現(xiàn)來賓統(tǒng)計(jì)記錄訪客信息的方法
這篇文章主要介紹了JS基于cookie實(shí)現(xiàn)來賓統(tǒng)計(jì)記錄訪客信息的方法,通過javascript記錄訪客信息到cookie的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
JavaScript實(shí)現(xiàn)PC端四格密碼輸入框功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)PC端四格密碼輸入框功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
基于Bootstrap的UI擴(kuò)展 StyleBootstrap
這篇文章主要為大家詳細(xì)介紹了基于Bootstrap的UI擴(kuò)展： StyleBootstrap，感興趣的小伙伴們可以參考一下2016-06-06
js中eval()函數(shù)可計(jì)算某個字符串,下面這篇文章主要給大家介紹了關(guān)于js中eval方法詳解之eval方法的初級應(yīng)用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
javascript鼠標(biāo)跟隨運(yùn)動3種效果（眼球效果，蘋果菜單，方向跟隨）
在很多網(wǎng)站上能看到圖片跟隨鼠標(biāo)移動的JS特效，其實(shí)做法很簡單，本文就介紹了很多javascript鼠標(biāo)跟隨運(yùn)動，在這里與大家分享下。2016-10-10
js通過location.search來獲取頁面?zhèn)鱽淼膮?shù)
js獲取通過window.location.search來獲取頁面?zhèn)鱽淼膮?shù)，經(jīng)測試可用，大家可以學(xué)習(xí)下2014-09-09
這篇文章主要介紹了談?wù)凧S中常遇到的瀏覽器兼容問題和解決方法 ，有些代碼在某些瀏覽器的某些版本中表現(xiàn)出不兼容，影響頁面的體驗(yàn)；這時就需要處理了這些兼容問題，讓頁面在多個版本的瀏覽器上運(yùn)行良好。2016-12-12
這篇文章主要介紹了js實(shí)現(xiàn)的tab標(biāo)簽切換效果，功能非常簡單，實(shí)現(xiàn)了點(diǎn)擊切換的效果，推薦給大家，有需要的小伙伴可以參考下。2015-09-09
JS實(shí)現(xiàn)點(diǎn)擊鏈接切換顯示隱藏內(nèi)容的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊鏈接切換顯示隱藏內(nèi)容的方法,涉及javascript鼠標(biāo)事件響應(yīng)及頁面元素屬性動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
今天用JS允許一個ActiveX，挺耗時的，想在允許時提示用戶正在允許，而不至于漏斗在那里2010-11-11