首页技术正文

js创建节点，小试牛刀

程序员风珍技术 2022年11月17日

0 收藏 803 点赞 2,492 浏览 925 个字

实现如下的功能

非常简单的一个小训练。

思想：

1.首先创建text和一个button

代码如下、

 <body>
 <input type="text" id="text1"/>
 <input id="btn1" type="button"  value="创建" />
 <ul> </ul> </body>

2.用js createElement(‘li’);创建li标签放进ul里面

js代码如下

 <script>
 window.onload=function(){
     var oBtn=document.getElementById("btn1");
     var text1=document.getElementById("text1");
     var oUl =document.getElementsByTagName("ul")[0];     oBtn.onclick=function()
     {
        var oLi=document.createElement('li');    //创建一个没有内容的li标签
        var isLi=oUl.getElementsByTagName('li');   //获取li数组
        if (isLi.length>0)   //判断ul里面有没有li标签，如果有，将创建的li放在所有li[0]的前面
        {
             oLi.innerHTML=text1.value+' '+"<a href='javascript:'>删除</a>";
               oUl.insertBefore(oLi, isLi[0]);
        }
        else  //否则直接添加到ul上，即是没有li标签在ul上
        {
          oLi.innerHTML=text1.value+' '+"<a href='javascript:'>删除</a>";
          oUl.appendChild(oLi);
        }        //删除功能
        var oA=oUl.getElementsByTagName("a");
        if(oA) //如果a标签存在
        {
            for(var i=0;i<isLi.length;i++)
            {
                 oA[i].onclick=function()  //点解a标签就删除其父节点，。即是li标签
                 {
                     oUl.removeChild(this.parentNode);
                 }
            }
        }     }
 };
 </script>