DOM節(jié)點的替換或修改函數(shù)replaceChild()用法實例
更新時間：2015年01月12日 10:04:27 投稿：shichen2014
這篇文章主要介紹了DOM節(jié)點的替換或修改函數(shù)replaceChild()用法,實例分析了replaceChild()替換DOM節(jié)點的使用技巧,需要的朋友可以參考下
本文實例講述了DOM節(jié)點的替換或修改函數(shù)replaceChild()用法。分享給大家供大家參考。具體分析如下：
DOM節(jié)點的替換過程：
（1）創(chuàng)建新的節(jié)點；
（2）找到舊的節(jié)點；
（3）站在父節(jié)點的角度，使用replaceChild(新,舊)函數(shù)來替換。
復制代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
function t(){
//思路：1.首先找到要替換的節(jié)點；2. 創(chuàng)建一個新的節(jié)點；3.找到父節(jié)點，在父節(jié)點的角度調(diào)用replaceChild(新,舊)方法
var newli = document.createElement('li');//創(chuàng)建新節(jié)點
var newtext = document.createTextNode('白天');//創(chuàng)建文本節(jié)點
newli.appendChild(newtext);
var nodeul = document.getElementsByTagName('ul')[0];//找到父節(jié)點
var oldli = nodeul.children[2];//找到要替換的節(jié)點
nodeul.replaceChild(newli,oldli);//替換
}
</script>
</head>
<body>
<div id="container">
<ul>
<li>春天</li>
<li>夏天</li>
<li>藍天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
</div>
<div id="copyul">
</div>
<hr />
<button onclick="t()" value="">節(jié)點的替換與修改</button>
</body>
</html>
<head>
<script type="text/javascript">
function t(){
//思路：1.首先找到要替換的節(jié)點；2. 創(chuàng)建一個新的節(jié)點；3.找到父節(jié)點，在父節(jié)點的角度調(diào)用replaceChild(新,舊)方法
var newli = document.createElement('li');//創(chuàng)建新節(jié)點
var newtext = document.createTextNode('白天');//創(chuàng)建文本節(jié)點
newli.appendChild(newtext);
var nodeul = document.getElementsByTagName('ul')[0];//找到父節(jié)點
var oldli = nodeul.children[2];//找到要替換的節(jié)點
nodeul.replaceChild(newli,oldli);//替換
}
</script>
</head>
<body>
<div id="container">
<ul>
<li>春天</li>
<li>夏天</li>
<li>藍天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
</div>
<div id="copyul">
</div>
<hr />
<button onclick="t()" value="">節(jié)點的替換與修改</button>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
FCKeditor內(nèi)容是否為空在提交表單時一定要判斷的，下面與大家分享下兩種形式，感興趣的朋友可以參考下哈2013-05-05
微信小程序?qū)崿F(xiàn)運動步數(shù)排行功能（可刪除）
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)運動步數(shù)排行功能（可刪除），實現(xiàn)代碼也很簡單,需要的朋友可以參考下2018-07-07
為非IE瀏覽器添加mouseenter,mouseleave事件的實現(xiàn)代碼
為非IE瀏覽器添加mouseenter,mouseleave事件的實現(xiàn)代碼,學習js的朋友可以參考下。2011-06-06
通用的加入收藏夾代碼支持IE Firefox等瀏覽器...2007-06-06
JavaScript判斷是否為數(shù)字的4種方法及效率比較
這篇文章主要介紹了JavaScript判斷是否為數(shù)字的4種方法及效率比較,本文直接給出判斷方法實現(xiàn)代碼及運行效率效果圖,方便大家選擇使用,需要的朋友可以參考下2015-04-04
這篇文章主要給大家介紹了關(guān)于如何實現(xiàn)小程序與小程序之間的跳轉(zhuǎn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
兩款JS腳本判斷手機瀏覽器類型跳轉(zhuǎn)WAP手機網(wǎng)站
本文通過兩款js腳本判斷手機瀏覽器類型跳轉(zhuǎn)到wap手機網(wǎng)站，感興趣的小伙伴快來學習吧2015-10-10
這篇文章主要介紹了js中如何精確計算加法和減法,需要的朋友可以參考下2014-03-03
js+xml生成級聯(lián)下拉框代碼，需要的朋友可以參考下2012-07-07![innerText innerHTML的用法以及注意事項 [推薦]](http://img.jbzj.com/images/xgimg/bcimg9.png)
innerText innerHTML的用法以及注意事項 [推薦]
我們常常需要使用另外一些對象的屬性來實現(xiàn)動態(tài)改變其中的文本,它們就是：innerText，outerText，innerHTML，outerHTML，千萬要注意它們的大小寫，因為錯一點您就得不到預期的效果了。2009-05-05