DOM節(jié)點(diǎn)的替換或修改函數(shù)replaceChild()用法實(shí)例
更新時(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)建一個(gè)新的節(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)建一個(gè)新的節(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)文章
FCKeditor內(nèi)容是否為空在提交表單時(shí)一定要判斷的，下面與大家分享下兩種形式，感興趣的朋友可以參考下哈2013-05-05
微信小程序?qū)崿F(xiàn)運(yùn)動(dòng)步數(shù)排行功能（可刪除）
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)運(yùn)動(dòng)步數(shù)排行功能（可刪除），實(shí)現(xiàn)代碼也很簡單,需要的朋友可以參考下2018-07-07
為非IE瀏覽器添加mouseenter,mouseleave事件的實(shí)現(xiàn)代碼
為非IE瀏覽器添加mouseenter,mouseleave事件的實(shí)現(xiàn)代碼,學(xué)習(xí)js的朋友可以參考下。2011-06-06
通用的加入收藏夾代碼支持IE Firefox等瀏覽器...2007-06-06
JavaScript判斷是否為數(shù)字的4種方法及效率比較
這篇文章主要介紹了JavaScript判斷是否為數(shù)字的4種方法及效率比較,本文直接給出判斷方法實(shí)現(xiàn)代碼及運(yùn)行效率效果圖,方便大家選擇使用,需要的朋友可以參考下2015-04-04
如何實(shí)現(xiàn)小程序與小程序之間的跳轉(zhuǎn)
這篇文章主要給大家介紹了關(guān)于如何實(shí)現(xiàn)小程序與小程序之間的跳轉(zhuǎn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
兩款JS腳本判斷手機(jī)瀏覽器類型跳轉(zhuǎn)WAP手機(jī)網(wǎng)站
本文通過兩款js腳本判斷手機(jī)瀏覽器類型跳轉(zhuǎn)到wap手機(jī)網(wǎng)站，感興趣的小伙伴快來學(xué)習(xí)吧2015-10-10
這篇文章主要介紹了js中如何精確計(jì)算加法和減法,需要的朋友可以參考下2014-03-03
js+xml生成級聯(lián)下拉框代碼，需要的朋友可以參考下2012-07-07![innerText innerHTML的用法以及注意事項(xiàng) [推薦]](http://img.jbzj.com/images/xgimg/bcimg9.png)
innerText innerHTML的用法以及注意事項(xiàng) [推薦]
我們常常需要使用另外一些對象的屬性來實(shí)現(xiàn)動(dòng)態(tài)改變其中的文本,它們就是：innerText，outerText，innerHTML，outerHTML，千萬要注意它們的大小寫，因?yàn)殄e(cuò)一點(diǎn)您就得不到預(yù)期的效果了。2009-05-05