<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding:0;
}
.active{
border:1px solid red;
width:100px;
height:50px;
}
div{
width:900px;
height:350px;
margin-top: 100px;
margin-left:200px;
}
ul{
width:500px;
height:300px;
border:1px solid black;
}
</style>
</head>
<body>
<div>
<input type="text">
<input type="button" value="创建">
<ul>
</ul>
</div>
<script>
window.onload=function(){
var oInput=document.getElementsByTagName('input')[0];
var bn1=document.getElementsByTagName('input')[1];
var oUl=document.getElementsByTagName('ul')[0];
bn1.onclick=function(){
var oLi=document.createElement('li');
//oUl.appendChild(oLi);//生成一个li插入到ul中,但是是插入到原有li的后面
oLi.className='active';
oLi.innerHTML=oInput.value;
//插入到原有li的前面先获取里面所有的li
//放到第一个li前面
//兼容IE当ul里面没有li时候直接插入
var aLi=document.getElementsByTagName('li');
if(aLi.length>0){
oUl.insertBefore(oLi,aLi[0]);
}else{
oUl.appendChild(oLi);
}
}
}
</script>
</body>
</html>