js创建节点,小试牛刀

js添加节点,js创建节点,小试牛刀 实现如下的功能 非常简单的一个小训练。

js添加节点,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创建节点,小试牛刀的相关内容如下:

js节点添加文字| js和jsp的区别和联系| js获取子节点| js按顺序移除节点| js列表添加元素| 添加节点| js添加html| js为节点添加函数|

标题:js创建节点,小试牛刀|http://www.bailuda.cn/new-374428.html

本文来自网络,不代表本站立场,转载请注明出处!