<h1>add dom:add text</h1> <pre style='color:red'> 1.添加dom时,直接在a标签上添加单击事件! </pre> <input type=text id='text' value='a new li'/> <input type=button id='btn1' value='add one with these letters'/> <hr> <input type=text id='text2' value=''/> <input type=button id='btn2' value='remove which one'/> <ul id='list'> <li class=box>1<a href='javascript:void(0);'>删除</a></li> <li>2<a href='javascript:void(0);'>删除</a></li> <li class=box>3<a href='javascript:void(0);'>删除</a></li> <li>4<a href='javascript:void(0);'>删除</a></li> <li>5<a href='javascript:void(0);'>删除</a></li> </ul> <hr> <div id=show></div> <style> .box{border:1px solid blue;} </style> <script> //---------------------------------------------- // 工具函数 //---------------------------------------------- //根据id获取obj function $(s){ if(typeof s=='object') return s; return document.getElementById(s); } function n(s){ $('show').innerHTML += s+'<br>'; } window.onload=function(){ oUl=$('list'); //这是一个动态数组 aLi=oUl.getElementsByTagName('li'); aA=oUl.getElementsByTagName('a'); //为每一个 删除 按钮绑定事件 for(var i=0; i<aA.length; i++){ aA[i].onclick=function(){ oUl.removeChild(this.parentNode) } } //删除事件 //父级.removeChild(子节点); $('btn2').onclick=function(){ //获取删除位置 var num=$('text2').value oUl.removeChild(aLi[num]); } //添加事件 $('btn1').onclick=function(){ //建立子节点 var oLi=document.createElement('li'); var text=$('text').value; //在节点中插入内容 //oLi.innerHTML=text; //或使用dom方式插入内容 var textNode=document.createTextNode(text) oLi.appendChild(textNode); //插入a标签 var oA=document.createElement('a'); //一旦建立,马上添加单击事件 oA.onclick=function(){ oUl.removeChild(this.parentNode) } oA.innerHTML='删除'; oA.setAttribute('href','javascript:void(0);'); //插入到li中 oLi.appendChild(oA); //插入到原来dom中 //父级.appendChild(子节点); //oUl.appendChild(oLi); //父级.insertBefore(子节点, 在谁以前插入); if(aLi.length>0){//若是不为空 oUl.insertBefore(oLi,aLi[0]);//任何位置均可以 }else{//若是为空 oUl.appendChild(oLi); } } } </script>
-------------- javascript