<!DOCTYPE>
<html>
<head>
<title>添加节点</title>
<script type=text/javascript>
window.οnlοad=function()
{
var t=new Date().getTime();
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1');
var aLi=document.getElementsByTagName('li');
var aA=document.getElementsByTagName('a');
oBtn.οnclick=function()
{
var oLi=document.createElement('li');
var oA=document.createElement('a');
oA.href="javascript:;";
oA.innerHTML="删除";
oLi.innerHTML=oTxt.value;
oLi.appendChild(oA);
if(aLi.length!=0)
{
oUl.insertBefore(oLi,aLi[0]);
}
else
{
oUl.appendChild(oLi);
}
for(var i=0;i<aA.length;i++)
{
aA[i].οnclick=function()
{
this.parentNode.parentNode.removeChild(this.parentNode);
}
}
}
for(var i=0;i<aA.length;i++)
{
aA[i].οnclick=function()
{
this.parentNode.parentNode.removeChild(this.parentNode);
}
}
var t_end=new Date().getTime()-t;
alert('运行时间:'+t_end+'毫秒');
}
</script>
</head>
<body>
<input type="text" id="txt1">
<button type="button" id="btn1">
添加
</button>
<ul id="ul1">
<li>a<a href="javascript:;">删除</a></li>
<li>b<a href="javascript:;">删除</a></li>
</ul>
</body>
</html>
收获:
1.当程序加载完以后,已存在的每一个a标签里都会有一个删除事件,当后来再添加一个li标签以后,该标签没有删除事件,所以必须重新执行一遍删除事件的添加;
2.可以通过new Date().getTime()得出程序运行的时间;