快捷導(dǎo)航

javascript替換已有元素replaceChild()使用介紹

更新時(shí)間：2014年04月03日 17:02:27 作者：

這篇文章主要介紹了javascript替換已有元素replaceChild()使用,需要的朋友可以參考下

replaceChild(a,b)是用來替換文檔中的已有元素的
參數(shù)a:要插入的節(jié)點(diǎn),
參數(shù)b:要替換的節(jié)點(diǎn)

 
var oDiv = document.getElementById("guoDiv"); 
var oSpan = document.createElement("span"); 
oSpan.innerHTML = "4"; 
var firsChild = oDiv.firstElementChild ? oDiv.firstElementChild : oDiv.firstChild 
var returnNode = oDiv.replaceChild(oSpan, firsChild); //替換第一個(gè)元素,返回被替換掉的元素 
alert(returnNode.innerHTML); //1 
var lastChild = oDiv.lastElementChild ? oDiv.lastElementChild : oDiv.lastChild; 
oSpan = document.createElement("span"); 
oSpan.innerHTML = "5"; 
returnNode = oDiv.replaceChild(oSpan, lastChild); //替換最后一個(gè),返回被替換掉的元素 
alert(returnNode.innerHTML);//3 

復(fù)制代碼代碼如下:

 
<div id="guoDiv"> 
<span>1</span> 
<span>2</span> 
<span>3</span> 
</div> 

您可能感興趣的文章:

相關(guān)文章

js使用ajax傳值給后臺(tái),后臺(tái)返回字符串處理方法
今天小編就為大家分享一篇js使用ajax傳值給后臺(tái),后臺(tái)返回字符串處理方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
微信小程序?qū)崿F(xiàn)彈出菜單動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈出菜單動(dòng)畫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-06-06
JS如何生成隨機(jī)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了JS如何生成隨機(jī)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
js canvas實(shí)現(xiàn)擦除效果示例代碼
擦除效果在我們?nèi)粘ｉ_發(fā)中也是時(shí)有見到的，通過擦除效果大大加強(qiáng)了與用戶的交互性，所以下面這篇文章主要給大家介紹了利用js和canvas實(shí)現(xiàn)擦除效果的相關(guān)資料，文中給出了詳細(xì)的介紹和示例代碼，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-04-04
js實(shí)現(xiàn)精確到秒的日期選擇器完整實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)精確到秒的日期選擇器,以完整實(shí)例形式分析了JavaScript日期選擇器的實(shí)現(xiàn)步驟與相關(guān)技巧,涉及JavaScript針對(duì)時(shí)間與日期的相關(guān)運(yùn)算,需要的朋友可以參考下
2016-04-04
JS動(dòng)態(tài)更改div高度實(shí)現(xiàn)代碼例子
在Web開發(fā)中通過使用JavaScript可以動(dòng)態(tài)地修改HTML元素的屬性和樣式,下面這篇文章主要給大家介紹了關(guān)于JS動(dòng)態(tài)更改div高度實(shí)現(xiàn)的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
2023-11-11
JavaScript正則替換HTML標(biāo)簽功能示例
這篇文章主要介紹了JavaScript正則替換HTML標(biāo)簽功能,結(jié)合完整實(shí)例形式詳細(xì)分析了javascript正則替換字符串操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-03-03
使用Taro實(shí)現(xiàn)小程序商城的購(gòu)物車功能模塊的實(shí)例代碼
這篇文章主要介紹了使用Taro實(shí)現(xiàn)的小程序商城的購(gòu)物車功能模塊,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-06-06
微信小程序?qū)崿F(xiàn)多張照片上傳功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多張照片上傳功能,當(dāng)服務(wù)器的狀態(tài)碼為200且圖片上傳完畢后將圖片的src轉(zhuǎn)化為Json字符串存在數(shù)組中以便將其添加到數(shù)據(jù)庫,本文通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-03-03
將中國(guó)標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)換成標(biāo)準(zhǔn)格式的代碼
這篇文章主要介紹了將中國(guó)標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)換成標(biāo)準(zhǔn)格式的方法,需要的朋友可以參考下
2014-03-03