js在指定位置增加節(jié)點(diǎn)函數(shù)insertBefore()用法實(shí)例

更新時間：2015年01月12日 11:19:38 投稿：shichen2014

這篇文章主要介紹了js在指定位置增加節(jié)點(diǎn)函數(shù)insertBefore()用法,實(shí)例分析了insertBefore()函數(shù)追加結(jié)點(diǎn)的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實(shí)例講述了js在指定位置增加節(jié)點(diǎn)函數(shù)insertBefore()用法。分享給大家供大家參考。具體分析如下：

函數(shù)原型如下：

insertBefore(參數(shù)1，參數(shù)2)：在指定位置添加節(jié)點(diǎn)

具體代碼如下：

復(fù)制代碼代碼如下:

<html>

<head>

<script type="text/javascript">

function t(){

 var nodeli = document.createElement('li');//創(chuàng)建一個li節(jié)點(diǎn)

 var li_text = document.createTextNode('藍(lán)天');//創(chuàng)建一個文本節(jié)點(diǎn)

 nodeli.appendChild(li_text);//將文本節(jié)點(diǎn)追加到li節(jié)點(diǎn)上

 var nodeul = document.getElementsByTagName('ul')[0];//獲取第一個UL節(jié)點(diǎn)

 var nodeli1 = nodeul.getElementsByTagName('li')[2];//獲取ul下第3個節(jié)點(diǎn)——秋天

 nodeul.insertBefore(nodeli,nodeli1);//函數(shù)insertBefore()表示在哪個節(jié)點(diǎn)前添加。第一個參數(shù)為要插入的新節(jié)點(diǎn)，第二個參數(shù)為已有節(jié)點(diǎn)

}

</script>

</head>

<body>

<div id="container">

 <ul>

  <li>春天</li>

  <li>夏天</li>

  <li>秋天</li>

  <li>冬天</li>

 </ul>

</div>

<hr />

<button onclick="t()" value="">指定位置增加節(jié)點(diǎn)</button>

</body>

</html>

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

您可能感興趣的文章:

相關(guān)文章

xml和web特殊字符
在html和xml文件中，往往會因?yàn)橐韵绿厥庾址鴮?dǎo)致文件解析出錯，一般通過以下函數(shù)來處理。
2009-04-04
uni-app 支持多端第三方地圖定位的方法
這篇文章主要介紹了uni-app 支持多端第三方地圖定位的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
實(shí)現(xiàn)抖音兩個旋轉(zhuǎn)小球的loading技巧實(shí)例
這篇文章主要為大家介紹了實(shí)現(xiàn)抖音兩個旋轉(zhuǎn)小球的loading技巧實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
JavaScript格式化json和xml的方法示例
這篇文章主要介紹了JavaScript格式化json和xml的方法,結(jié)合實(shí)例形式分析了javascript格式化json及格式化xml數(shù)據(jù)的具體操作技巧,需要的朋友可以參考下
2019-01-01
JavaScript深拷貝的一些踩坑記錄
這篇文章主要給大家介紹了關(guān)于JavaScript深拷貝的一些踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
js仿淘寶商品放大預(yù)覽功能
本文主要介紹了js仿淘寶商品放大預(yù)覽功能的實(shí)例。具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
javaScript之split與join的區(qū)別(詳解)
下面小編就為大家?guī)硪黄猨avaScript之split與join的區(qū)別(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
ES6學(xué)習(xí)筆記之正則表達(dá)式和字符串正則方法分析
這篇文章主要介紹了ES6學(xué)習(xí)筆記之正則表達(dá)式和字符串正則方法,結(jié)合實(shí)例形式對比分析了ES5與ES6正則操作的常用函數(shù)功能與用法區(qū)別,需要的朋友可以參考下
2017-04-04
原生JS+CSS實(shí)現(xiàn)炫酷重力模擬彈跳系統(tǒng)的登錄頁面
今天小編給大家分享基于原生JS實(shí)現(xiàn)一個炫酷的登錄頁面，實(shí)現(xiàn)效果有點(diǎn)像重力模擬彈跳系統(tǒng)，效果非常棒，需要的朋友參考下實(shí)現(xiàn)代碼吧
2017-11-11
最新JS正則表達(dá)式驗(yàn)證郵箱和手機(jī)號實(shí)例(2022)
在前端開發(fā)過程中,通過使用JS的正則表達(dá)式來校驗(yàn)輸入的郵箱或者手機(jī)號是否正確,這也是一個非常常見的業(yè)務(wù)情景需求,下面這篇文章主要給大家介紹了關(guān)于利用JS正則表達(dá)式驗(yàn)證郵箱和手機(jī)號的相關(guān)資料,需要的朋友可以參考下
2022-08-08