JavaScript 插入新li元素
本章節分享一段代碼實例，它實現了在li元素列表的任意位置插入一個新的li元素。
代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/" />
<title>實例</title>
<style type="text/css">
#box li{
width:300px;
height:30px;
list-style-type:none;
font-size:12px;
}
</style>
<script>
window.onload=function(){
var obox=document.getElementById("box");
var obt=document.getElementById("bt");
obt.onclick=function(){
var newLi=document.createElement("li");
newLi.innerHTML="本站的url地址是實例3";
var tempOne=obox.getElementsByTagName("li")[2];
obox.insertBefore(newLi,tempOne)
}
}
</script>
</head>
<body>
<ul id="box">
<li>實例</li>
<li>只有努力奮斗才會有美好的未來</li>
<li>沒有人一開始就是高手</li>
<li>只有當下的時間才是最珍貴的，不要期待明天。</li>
</ul>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>上面的實現了在原來li元素列表的第二個和第三個之間插入一個新的li元素。
（1）.document.createElement()方法可以參閱document.createElement()一章節。
（2）.innerHTML屬性可以參閱js innerHTML一章節。
（3）.getElementsByTagName()方法可以參閱document.getElementsByTagName()一章節。
（4）.insertBefore()方法可以參閱javascript insertBefore一章節。
聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至201542412@QQ.com舉報，一經查實，本站將立刻刪除。
相關推薦
-
javascript計算字符串長度代碼實例
下面分享一段代碼實例，它實現了計算字符串長度的效果。并且能夠區分中英文，代碼實例如下:function DLngth(fD){ vr intLngth=0 for (vr i=
-
微信隱藏網頁右上角按鈕js代碼實例
直接看代碼，因為非常的簡單，沒啥好說的:WixinJsBridg.cll(hidOtionMnu);Wixini的地址是github/zxli/Wixini。
-
js微信窗口關閉事件簡單代碼實例
下面就是一個簡單的演示代碼片段:WixinJSBridg.invok(closWindow,{},function(rs){ //lrt(rs.rr_msg); });Wixin
-
js獲取網頁title標題代碼實例
本章節介紹一下如何利用jvscrit獲取網頁的標題。這里就不通過代碼實例介紹了，因為實在是太簡單了，只需要使用如下代碼即可:documnt.titl
-
根據比例縮放圖片的尺寸不變形代碼實例
本章節介紹一下如何根據比例實現圖片的不變形縮放效果。下面是一段帶代碼實例u
