快捷導(dǎo)航

javascript insertAfter()定義與用法示例

更新時(shí)間：2016年07月25日 08:56:56 作者：leejersey

這篇文章主要介紹了javascript insertAfter()定義與用法,實(shí)例分析了javascript節(jié)點(diǎn)后插入元素的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下

本文實(shí)例講述了javascript insertAfter()定義與用法。分享給大家供大家參考，具體如下：

HTML部分：

<div id="b">bbbbbbbbb</div>
<div>dddddd</div>

JavaScript部分:

window.onload=function(){
  var a =document.createElement("span");
  var b =document.createTextNode("cssrain");
  a.appendChild(b);
  var mubiao = document.getElementById("b");
  insertAfter(a,mubiao); 
}
function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
   if (parent.lastChild == targetElement) {// 如果最后的節(jié)點(diǎn)是目標(biāo)元素，則直接添加。因?yàn)槟J(rèn)是最后
    parent.appendChild(newElement);
   } else {
    parent.insertBefore(newElement,targetElement.nextSibling);//如果不是，則插入在目標(biāo)元素的下一個(gè)兄弟節(jié)點(diǎn)的前面。也就是目標(biāo)元素的后面。
   }
}

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript中不易分清的slice,splice和split三個(gè)函數(shù)
這篇文章主要為大家詳細(xì)介紹了javascript中不易分清的slice,splice和split三個(gè)函數(shù)，感興趣的小伙伴們可以參考一下
2016-03-03
js帶前后翻頁(yè)的圖片切換效果代碼分享
這篇文章主要介紹了js帶前后翻頁(yè)的圖片切換效果，圖片切換效果特別適合做產(chǎn)品展示，感興趣的小伙伴可以參考下。
2015-09-09
微信小程序開(kāi)發(fā)背景圖顯示功能
這篇文章主要介紹了微信小程序開(kāi)發(fā)--背景圖顯示,需要的朋友可以參考下
2018-08-08
一個(gè)判斷搶購(gòu)時(shí)間是否到達(dá)的簡(jiǎn)單的js函數(shù)
這篇文章主要介紹了一個(gè)簡(jiǎn)單的判斷搶購(gòu)時(shí)間是否到達(dá)的js函數(shù)，原理很簡(jiǎn)單，找到時(shí)鐘的id，計(jì)算數(shù)值，到達(dá)搶購(gòu)時(shí)間時(shí)執(zhí)行任務(wù)，需要的朋友可以參考下
2014-06-06
JavaScript this綁定過(guò)程深入詳解
這篇文章主要介紹了JavaScript this綁定過(guò)程,結(jié)合實(shí)例形式深入分析了JavaScript中this關(guān)鍵字的功能、原理、綁定方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2018-12-12
Bootstrap 組件之按鈕（二）
Bootstrap是Twitter推出的一個(gè)用于前端開(kāi)發(fā)的開(kāi)源工具包。本文給大家介紹Bootstrap 組件之按鈕的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧
2016-05-05
js+css實(shí)現(xiàn)紅包雨效果
這篇文章主要為大家詳細(xì)介紹了js+css實(shí)現(xiàn)紅包雨效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
js對(duì)象與打印對(duì)象分析比較
js對(duì)象與打印對(duì)象分析比較，需要的朋友可以參考一下
2013-04-04
解析JavaScript中instanceof對(duì)于不同的構(gòu)造器或許都返回true
這篇文章主要是對(duì)JavaScript中instanceof對(duì)于不同的構(gòu)造器或許都返回true進(jìn)行了詳細(xì)的解析，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
原生js實(shí)現(xiàn)addClass,removeClass,hasClass方法
這篇文章主要介紹了原生js實(shí)現(xiàn)addClass,removeClass,hasClass方法和使用原生JS實(shí)現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能,需要的朋友可以參考下
2016-04-04