li列表的前面插入一个元素
本章节分享一段代码实例，它实现了在li元素列表的开头插入一个新li元素。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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地址是pipipi.net";
var tempOne=obox.getElementsByTagName("li")[0];
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>
上面的代码实现了在列表的开头插入一个新的元素，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var obox=document.getElementById("box")，获取id属性值为box的元素对象。
（3）.var obt=document.getElementById("bt")，获取id属性值为bt的元素对象。
（4）.obt.onclick=function(){}，为按钮注册click事件处理函数。
（5）.var newLi=document.createElement("li")，创建一个li元素对象。
（6）.newLi.innerHTML="本站的url地址是pipipi.net"，设置新li元素的html内容。
（7）.var tempOne=obox.getElementsByTagName("li")[0]，获取原来li元素集合中第一个li元素对象。
（8）.obox.insertBefore(newLi,tempOne)，将新元素插入到原来第一个li元素的前面。
二.相关阅读:
（1）.document.createElement()参阅document.createElement()一章节。
（2）.innerHTML属性参阅js innerHTML一章节。
（3）.getElementsByTagName()参阅document.getElementsByTagName()一章节。
（4）.insertBefore()参阅javascript insertBefore一章节。