js创建节点，小试牛刀
生活随笔
收集整理的這篇文章主要介紹了
js创建节点，小试牛刀
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實現如下的功能
非常簡單的一個小訓練。
思想：
1.首先創建text和一個button
代碼如下、
1 <body> 2 <input type="text" id="text1"/> 3 <input id="btn1" type="button" value="創建" /> 4 <ul> 5 6 </ul> 7 8 </body>2.用js?createElement('li');創建li標簽放進ul里面
js代碼如下
1 <script> 2 window.οnlοad=function(){ 3 var oBtn=document.getElementById("btn1"); 4 var text1=document.getElementById("text1"); 5 var oUl =document.getElementsByTagName("ul")[0]; 6 7 oBtn.οnclick=function() 8 { 9 var oLi=document.createElement('li'); //創建一個沒有內容的li標簽 10 var isLi=oUl.getElementsByTagName('li'); //獲取li數組 11 if (isLi.length>0) //判斷ul里面有沒有li標簽，如果有，將創建的li放在所有li[0]的前面 12 { 13 oLi.innerHTML=text1.value+' '+"<a href='javascript:'>刪除</a>"; 14 oUl.insertBefore(oLi, isLi[0]); 15 } 16 else //否則直接添加到ul上，即是沒有li標簽在ul上 17 { 18 oLi.innerHTML=text1.value+' '+"<a href='javascript:'>刪除</a>"; 19 oUl.appendChild(oLi); 20 } 21 22 //刪除功能 23 var oA=oUl.getElementsByTagName("a"); 24 if(oA) //如果a標簽存在 25 { 26 for(var i=0;i<isLi.length;i++) 27 { 28 oA[i].οnclick=function() //點解a標簽就刪除其父節點，。即是li標簽 29 { 30 oUl.removeChild(this.parentNode); 31 } 32 } 33 } 34 35 } 36 }; 37 </script>其實代碼非常簡單，自己寫寫，練習一下熟練度。
轉載于:https://www.cnblogs.com/biyongyao/p/5851315.html
總結
以上是生活随笔為你收集整理的js创建节点，小试牛刀的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： GridView的一些常用属性：
- 下一篇： HDU 3665 Seaside