1 //获取三种方法 2 getElementById 3 getElementsByTagName 4 getElementsByClassName 5 6 //创建dom元素 7 createElement 8 //插入 显示在尾部 9 appendChild(节点) 10 //删除 removeChild 11 insertBefore(子节点,原有节点之前) 12 13 window.onload=function () 14 { 15 var oBtn=document.getElementById('btn1'); 16 var oTxt=document.getElementById('txt1'); 17 var oUl=document.getElementById('ul1'); 18 19 oBtn.onclick=function () 20 { 21 var oLi=document.createElement('li'); 22 //var aLi=oUl.getElementsByTagName('li'); 23 oLi.innerHTML=oTxt.value; 24 25 //父.appendChild(子节点) 26 oUl.appendChild(oLi); 27 28 //oUl.insertBefore(oLi, aLi[0]); 29 } 30 } 31 }
1 window.onload=function () 2 { 3 var oBtn=document.getElementById('btn1'); 4 var oTxt=document.getElementById('txt1'); 5 var oUl=document.getElementById('ul1'); 6 7 oBtn.onclick=function () 8 { 9 var oLi=document.createElement('li'); 10 var aLi=oUl.getElementsByTagName('li'); 11 12 oLi.innerHTML=oTxt.value; 13
//加判断 否则找不到aLi[0] 报错,
14 if(aLi.length==0) 15 { 16 oUl.appendChild(oLi); 17 } 18 else 19 { 20 oUl.insertBefore(oLi, aLi[0]); 21 } 22 } 23 }
//删除 <script type="text/javascript"> window.onload=function () { var aA=document.getElementsByTagName('a'); var oUl=document.getElementById('ul1'); var i=0; for(i=0;i<aA.length;i++) { aA[i].onclick=function () { oUl.removeChild(this.parentNode); } } } </script> </head> <body> <ul id="ul1"> <li>111 <a href="javascript:;">删除</a></li> <li>222 <a href="javascript:;">删除</a></li> <li>333 <a href="javascript:;">删除</a></li> <li>444 <a href="javascript:;">删除</a></li> </ul>
- DOM节点
- children 子节点
- parentNode 父节点
- offsetParent (根据定位的上一级)通过offsetParent 可以定位自己在页面得实际位置