JavaScript缺少insertAfter解決方案
在現(xiàn)有的方法后插入一個(gè)新元素，你可能會(huì)想：既然有insertBefore方法，是不是也有一個(gè)相應(yīng)的insertAfter()方法。很可惜，DOM沒有提供方法。
下面編寫insertAfter函數(shù)，雖然DOM本身沒有提供，但它確實(shí)提供了一個(gè)把一個(gè)節(jié)點(diǎn)插入到另一個(gè)節(jié)點(diǎn)之后所有工具。我們完全可以利用已有的DOM方法和屬性編寫一個(gè)insertAfter函數(shù)：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>
在現(xiàn)有的方法后插入一個(gè)新元素，你可能會(huì)想：既然有insertBefore方法，是不是也有一個(gè)相應(yīng)的insertAfter()方法。很可惜，DOM沒有提供方法。下面編寫insertAfter函數(shù)，雖然DOM本身沒有提供，但它確實(shí)提供了一個(gè)把一個(gè)節(jié)點(diǎn)插入到另一個(gè)節(jié)點(diǎn)之后所有工具。我們完全可以利用已有的DOM方法和屬性編寫一個(gè)insertAfter函數(shù)：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
var p = document.createElement('p');
var txt = document.createTextNode('我是新插入的節(jié)點(diǎn)');
p.appendChild(txt);
var lis = document.getElementsByTagName('li');
//insertAfter(p,lis[0])
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
我們大家在做彈出層的時(shí)候，必不可少的一個(gè)元素就是蒙層，也就是遮罩層，當(dāng)彈出層滾動(dòng)的時(shí)候，蒙層底部的頁面一般是要求固定不動(dòng)的，所以這篇文章就來給大家介紹了如何禁止彈窗中蒙層底部頁面跟隨滾動(dòng)的幾種方法，需要的朋友可以參考下。2017-12-12
jQuery實(shí)現(xiàn)仿百度首頁滑動(dòng)伸縮展開的添加服務(wù)效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿百度首頁滑動(dòng)伸縮展開的添加服務(wù)效果代碼,通過jQuery相應(yīng)鼠標(biāo)事件控制頁面元素的動(dòng)態(tài)變換功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了JS中Select下拉列表類(支持輸入模糊查詢)功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-01-01
javascript cookie操作類的實(shí)現(xiàn)代碼小結(jié)附使用方法
javascript cookie操作類的實(shí)現(xiàn)代碼小結(jié)附使用方法，對(duì)于cookies操作不是很熟悉的朋友可以參考下。2010-06-06
這篇文章主要介紹了詳解如何webpack使用DllPlugin，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了詳解nuxt 微信公眾號(hào)支付遇到的問題與解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
如何讓div span等元素能響應(yīng)鍵盤事件操作指南
在我這幾天的工作中遇到了一個(gè)問題，我有一個(gè)可編輯的div，并且在DIV里面還有一個(gè)可編輯的span，我想要讓span能響應(yīng)鍵盤事，想實(shí)現(xiàn)這種效果，應(yīng)該如何實(shí)踐呢2012-11-11
web網(wǎng)頁按比例顯示圖片實(shí)現(xiàn)原理及js代碼
由于上傳圖片的大小是未知的，在顯示成縮略圖的時(shí)候必須進(jìn)行按比例的縮放才能美觀地顯示，本文將為大家簡(jiǎn)單的介紹一種比較不錯(cuò)的方法，有此需求的朋友可以參考下2013-08-08
在JavaScript中并沒有類的概念，但JavaScript中的確可以實(shí)現(xiàn)重載，多態(tài)，繼承。這些實(shí)現(xiàn)其實(shí)方法都可以用JavaScript中的引用和變量作用域結(jié)合prototype來解釋。2010-04-04
JavaScript實(shí)現(xiàn)tab欄切換的效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)tab欄切換的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09