<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('btn1')
var oUl=document.getElementById('ul1')
var oTxt=document.getElementById('text1')
oBtn.onclick=function(){
var oLi=document.createElement('li')
var aLi=oUl.getElementsByTagName('li')
oLi.innerHTML=oTxt.value
if(aLi.length>0){
oUl.insertBefore(oLi,aLi[0])
}
else{
oUl.appendChild(oLi)
}
}
}
</script>
</head>
<body>
<input type="text" id="text1" />
<input type="button" id="btn1" value="creat lis" />
<ul id="ul1"></ul>
</body>
</html>
创建DOM元素，这里有几个小事项需要注意。
第一：光写createlement是不够的，后面必须要和appendChild或者insertBefore搭配使用才会有创建DOM的效果。
第二：appendChild在IE7里是有问题的，注意看，我们的UL里一开始是没有li的，所以aLi[0]在IE7里是读不出来的。这里用了一个if else结构解决这个问题。
第三：我们这里实现了将Text里，我们输入的文字转到新建的li里。用的是innerHTML这个代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function()
{
var oUl=document.getElementById('ul1')
var aA=document.getElementsByTagName('a')
for(i=0;i<aA.length;i++){
aA[i].onclick=function(){
oUl.removeChild(this.parentNode)
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>1111111111<a href="#">delete</a></li>
<li>2222222222<a href="#">delete</a></li>
<li>3333333333<a href="#">delete</a></li>
<li>4444444444<a href="#">delete</a></li>
<li>5555555555<a href="#">delete</a></li>
</ul>
</body>
</html>
这里只需要注意这点
oUl.removeChild(this.parentNode)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById('ul1')
var oFrag=document.createDocumentFragment()
for(i=0;i<10000;i++){
var oLi=document.createElement('li')
oFrag.appendChild(oLi)
}
oUl.appendChild(oFrag)
}
</script>
</head>
<body>
<ul id="ul1"></ul>
</body>
</html>
文档碎片，理论上可提高性能。