miaov视频教程 http://study.163.com/course/courseMain.htm?courseId=231002
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body>
<ul id="ul1">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
<input type="button" id="add" value="添加"/>
<script>
window.onload=function(){
var oUl=document.getElementById('ul1'); //ul
var oLi=oUl.getElementsByTagName('li'); //li
var iNow=4;
for(i=0;i<oLi.length;i++){
this.onclick=function(ev){ //这里不用this，不能发生冒泡
ev=ev || window.event; //event兼容
target=ev.srcElement || ev.target; //event.target兼容
if(target.nodeName.toLowerCase() == "li"){ //判断nodeName
target.style.backgroundColor='red'; //背景红色
}
}
}
var oAdd=document.getElementById('add'); //点击添加按钮
oAdd.onclick=function(){
iNow++;
var aLi=document.createElement('li'); //创建li节点
aLi.innerHTML=iNow*1111;
oUl.appendChild(aLi); //添加li节点
}
}
</script>
</body>
</html>