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