DOM inserBefore createElement

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
		window.onload = function(){
			var oBtn = document.getElementById("btn1");
			var oText = document.getElementById("text");
			var oUl = document.getElementById("ul1");
			//找到所有的li
			var aLi = document.getElementsByTagName("li");
			
			oBtn.onclick = function(){
				var oLi = document.createElement("li");
				oLi.innerHTML=oText.value;
//				oUl.appendChild(oLi);

				//inserBefore 有两个参数 一个是插入元素 第二个是在谁的前面插入
				//类似微博
//				oUl.insertBefore(oLi,aLi[0]);//这样写在ie中会报错 因为ie认为没有li
				
				//兼容写法
				if(aLi.length >0)
				{
					oUl.insertBefore(oLi,aLi[0]);
				}else{
					oUl.appendChild(oLi)
				}
			}
		}
			
		</script>
	</head>
	<body>
		<input type="text" name="" id="text"  value=""/>
		<input id="btn1" type="button" value="创建li" />
		<ul id="ul1"></ul>
	</body>
</html>

  

posted @ 2016-03-12 08:35  mingjixiaohui  阅读(190)  评论(0编辑  收藏  举报