javascript替換已有元素replaceChild()使用介紹
更新時間：2014年04月03日 17:02:27 作者：
這篇文章主要介紹了javascript替換已有元素replaceChild()使用,需要的朋友可以參考下
replaceChild(a,b)是用來替換文檔中的已有元素的
參數(shù)a:要插入的節(jié)點,
參數(shù)b:要替換的節(jié)點
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); //替換第一個元素,返回被替換掉的元素
alert(returnNode.innerHTML); //1
var lastChild = oDiv.lastElementChild ? oDiv.lastElementChild : oDiv.lastChild;
oSpan = document.createElement("span");
oSpan.innerHTML = "5";
returnNode = oDiv.replaceChild(oSpan, lastChild); //替換最后一個,返回被替換掉的元素
alert(returnNode.innerHTML);//3
<div id="guoDiv">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
參數(shù)a:要插入的節(jié)點,
參數(shù)b:要替換的節(jié)點
復(fù)制代碼 代碼如下:
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); //替換第一個元素,返回被替換掉的元素
alert(returnNode.innerHTML); //1
var lastChild = oDiv.lastElementChild ? oDiv.lastElementChild : oDiv.lastChild;
oSpan = document.createElement("span");
oSpan.innerHTML = "5";
returnNode = oDiv.replaceChild(oSpan, lastChild); //替換最后一個,返回被替換掉的元素
alert(returnNode.innerHTML);//3
復(fù)制代碼 代碼如下:
<div id="guoDiv">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
相關(guān)文章
今天小編就為大家分享一篇js使用ajax傳值給后臺,后臺返回字符串處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)彈出菜單動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要為大家詳細介紹了JS如何生成隨機驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
擦除效果在我們?nèi)粘ｉ_發(fā)中也是時有見到的，通過擦除效果大大加強了與用戶的交互性，所以下面這篇文章主要給大家介紹了利用js和canvas實現(xiàn)擦除效果的相關(guān)資料，文中給出了詳細的介紹和示例代碼，需要的朋友可以參考借鑒，下面來一起看看吧。2017-04-04
這篇文章主要介紹了js實現(xiàn)精確到秒的日期選擇器,以完整實例形式分析了JavaScript日期選擇器的實現(xiàn)步驟與相關(guān)技巧,涉及JavaScript針對時間與日期的相關(guān)運算,需要的朋友可以參考下2016-04-04
在Web開發(fā)中通過使用JavaScript可以動態(tài)地修改HTML元素的屬性和樣式,下面這篇文章主要給大家介紹了關(guān)于JS動態(tài)更改div高度實現(xiàn)的相關(guān)資料,文中給出了詳細的代碼示例,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了JavaScript正則替換HTML標簽功能,結(jié)合完整實例形式詳細分析了javascript正則替換字符串操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-03-03
使用Taro實現(xiàn)小程序商城的購物車功能模塊的實例代碼
這篇文章主要介紹了使用Taro實現(xiàn)的小程序商城的購物車功能模塊,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多張照片上傳功能,當(dāng)服務(wù)器的狀態(tài)碼為200且圖片上傳完畢后將圖片的src轉(zhuǎn)化為Json字符串存在數(shù)組中以便將其添加到數(shù)據(jù)庫,本文通過實例代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了將中國標準時間轉(zhuǎn)換成標準格式的方法,需要的朋友可以參考下2014-03-03