JavaScript缺少insertAfter解決方案
在現(xiàn)有的方法后插入一個新元素,你可能會想:既然有insertBefore方法,是不是也有一個相應(yīng)的insertAfter()方法。很可惜,DOM沒有提供方法。
下面編寫insertAfter函數(shù),雖然DOM本身沒有提供,但它確實(shí)提供了一個把一個節(jié)點(diǎn)插入到另一個節(jié)點(diǎn)之后所有工具。我們完全可以利用已有的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本身沒有提供,但它確實(shí)提供了一個把一個節(jié)點(diǎn)插入到另一個節(jié)點(diǎn)之后所有工具。我們完全可以利用已有的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é)點(diǎn)’); p.appendChild(txt); var lis = document.getElementsByTagName(’li’); //insertAfter(p,lis[0])</script></body></html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. SpringBoot 開發(fā)提速神器 Lombok+MybatisPlus+SwaggerUI2. 10個提供免費(fèi)PHP腳本下載的網(wǎng)站3. js實(shí)現(xiàn)跳一跳小游戲4. php5.6不能擴(kuò)展redis.so的解決方法5. js實(shí)現(xiàn)貪吃蛇小游戲(加墻)6. 使用idea 去除 html 代碼前的行號和空行的方法詳解7. JVM之class文件結(jié)構(gòu)8. PHP設(shè)計(jì)模式(四)原型模式Prototype實(shí)例詳解【創(chuàng)建型】9. Python編寫nmap掃描工具10. python 爬取嗶哩嗶哩up主信息和投稿視頻
