js在指定位置增加節(jié)點函數(shù)insertBefore()用法實例
更新時間：2015年01月12日 11:19:38 投稿：shichen2014
這篇文章主要介紹了js在指定位置增加節(jié)點函數(shù)insertBefore()用法,實例分析了insertBefore()函數(shù)追加結(jié)點的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了js在指定位置增加節(jié)點函數(shù)insertBefore()用法。分享給大家供大家參考。具體分析如下：
函數(shù)原型如下：
insertBefore(參數(shù)1，參數(shù)2)：在指定位置添加節(jié)點
具體代碼如下：
復(fù)制代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
function t(){
var nodeli = document.createElement('li');//創(chuàng)建一個li節(jié)點
var li_text = document.createTextNode('藍(lán)天');//創(chuàng)建一個文本節(jié)點
nodeli.appendChild(li_text);//將文本節(jié)點追加到li節(jié)點上
var nodeul = document.getElementsByTagName('ul')[0];//獲取第一個UL節(jié)點
var nodeli1 = nodeul.getElementsByTagName('li')[2];//獲取ul下第3個節(jié)點——秋天
nodeul.insertBefore(nodeli,nodeli1);//函數(shù)insertBefore()表示在哪個節(jié)點前添加。第一個參數(shù)為要插入的新節(jié)點，第二個參數(shù)為已有節(jié)點
}
</script>
</head>
<body>
<div id="container">
<ul>
<li>春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
</div>
<hr />
<button onclick="t()" value="">指定位置增加節(jié)點</button>
</body>
</html>
<head>
<script type="text/javascript">
function t(){
var nodeli = document.createElement('li');//創(chuàng)建一個li節(jié)點
var li_text = document.createTextNode('藍(lán)天');//創(chuàng)建一個文本節(jié)點
nodeli.appendChild(li_text);//將文本節(jié)點追加到li節(jié)點上
var nodeul = document.getElementsByTagName('ul')[0];//獲取第一個UL節(jié)點
var nodeli1 = nodeul.getElementsByTagName('li')[2];//獲取ul下第3個節(jié)點——秋天
nodeul.insertBefore(nodeli,nodeli1);//函數(shù)insertBefore()表示在哪個節(jié)點前添加。第一個參數(shù)為要插入的新節(jié)點，第二個參數(shù)為已有節(jié)點
}
</script>
</head>
<body>
<div id="container">
<ul>
<li>春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
</div>
<hr />
<button onclick="t()" value="">指定位置增加節(jié)點</button>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
- js字符串的各種格式的轉(zhuǎn)換 ToString，F(xiàn)ormat
- javascript 循環(huán)語句 while、do-while、for-in、for用法區(qū)別
- JavaScript中for..in循環(huán)陷阱介紹
- 在Linux上用forever實現(xiàn)Node.js項目自啟動
- 關(guān)于js中for in的缺陷淺析
- JavaScript中for-in遍歷方式示例介紹
- 得到form下的所有的input的js代碼
- 為javascript添加String.Format方法
- js使用for循環(huán)與innerHTML獲取選中tr下td值
- Javascript for in的缺陷總結(jié)
相關(guān)文章
在html和xml文件中，往往會因為以下特殊字符而導(dǎo)致文件解析出錯，一般通過以下函數(shù)來處理。2009-04-04
這篇文章主要介紹了uni-app 支持多端第三方地圖定位的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
實現(xiàn)抖音兩個旋轉(zhuǎn)小球的loading技巧實例
這篇文章主要為大家介紹了實現(xiàn)抖音兩個旋轉(zhuǎn)小球的loading技巧實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了JavaScript格式化json和xml的方法,結(jié)合實例形式分析了javascript格式化json及格式化xml數(shù)據(jù)的具體操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要給大家介紹了關(guān)于JavaScript深拷貝的一些踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
本文主要介紹了js仿淘寶商品放大預(yù)覽功能的實例。具有很好的參考價值。下面跟著小編一起來看下吧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é)合實例形式對比分析了ES5與ES6正則操作的常用函數(shù)功能與用法區(qū)別,需要的朋友可以參考下2017-04-04
原生JS+CSS實現(xiàn)炫酷重力模擬彈跳系統(tǒng)的登錄頁面
今天小編給大家分享基于原生JS實現(xiàn)一個炫酷的登錄頁面，實現(xiàn)效果有點像重力模擬彈跳系統(tǒng)，效果非常棒，需要的朋友參考下實現(xiàn)代碼吧2017-11-11
最新JS正則表達(dá)式驗證郵箱和手機(jī)號實例(2022)
在前端開發(fā)過程中,通過使用JS的正則表達(dá)式來校驗輸入的郵箱或者手機(jī)號是否正確,這也是一個非常常見的業(yè)務(wù)情景需求,下面這篇文章主要給大家介紹了關(guān)于利用JS正則表達(dá)式驗證郵箱和手機(jī)號的相關(guān)資料,需要的朋友可以參考下2022-08-08