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>