实现如下的功能

非常简单的一个小训练。

思想：

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>

其实代码非常简单，自己写写，练习一下熟练度。

js创建节点，小试牛刀的更多相关文章

  1. js创建节点及其属性

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. js 创建节点 以及 节点属性 删除节点

    case 'copy': var B1 = document.getElementById("B1"); //获得B1下的html文本 var copy_dom = documen ...

  3. js 创建节点

    //获取对象 console.log(obj)//字符串转对象 var ob = JSON.parse(data); //对象转为字符串 console.log(JSON.stringify(obj) ...

  4. js创建子节点

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  5. JS DOM创建节点

    DOM节点操作之增删改查 document.write() 可以向文档中添加节点 但是有个致命问题,会把文档原有的节点全部清空 因此不推荐使用 <!DOCTYPE html> <ht ...

  6. 第十三课：js操作节点的创建

    浏览器提供了多种方法创建节点.比如:document.createElement,innerHTML,insertAdjacentHTML,createContextualFragment. docu ...

  7. js添加创建节点和合并节点

    var _div = document.createElement("div"), //创建节点 txt1 = document.createTextNode("123& ...

  8. JQuery_DOM 节点操作之创建节点、插入节点

    一.创建节点 为了使页面更加智能化,有时我们想动态的在html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点 <script type="text/javasc ...

  9. js创建元素

    js创建多条数据,插入到页面中的方法. 方法一: 执行时间大概在35ms左右. 这个就属于使用字符串拼接之后,再一次性的插入到页面中.缺点是,容易导致事件难以绑定. 方法二: 执行时间不定,最少的在8 ...

随机推荐

  1. CPU标志寄存器

    这个标志寄存器似乎很重要,不干掉它,中断这玩意还进行不下去了,但是过于复杂,都是一些跟计算结果相关的位,头痛 (这是别人写的一篇非常好的关于标志寄存器的文章http://blog.csdn.net/w ...

  2. Hadoop生态上几个技术的关系与区别：hive、pig、hbase 关系与区别

    初接触Hadoop技术的朋友肯定会对它体系下寄生的个个开源项目糊涂了,我敢保证Hive,Pig,HBase这些开源技术会把你搞的有些糊涂,不要紧糊涂的不止你一个,如某个菜鸟的帖子的疑问,when to ...

  3. HBase with MapReduce （Summary）

    我们知道,hbase没有像关系型的数据库拥有强大的查询功能和统计功能,本文实现了如何利用mapreduce来统计hbase中单元值出现的个数,并将结果携带目标的表中, (1)mapper的实现 pac ...

  4. C#—WebService

    一.qq是否在线 1.添加Web引用    qqOnlineWebService cn.com.webxml.www.qqOnlineWebService shelly1 = new NIIT1109 ...

  5. 浅谈SEO-收录（二）

    如何更好的让搜索引擎收录网站中的内容,想要被良好的收录,可以尝试一下几点: 一.机器可读 百度通过一个叫做Baiduspider的程序抓取互联网上的网页, 经过处理后建入索引中,目前只支持读文本,fl ...

  6. 简便删除已经存在的oracle数据库用户UPAY3LINGXI_YS

    简便删除已经存在的oracle数据库用户UPAY3LINGXI_YS:1.Toad工具用oracle最大权限用户登录system2.查看正在使用UPAY3LINGXI_YS的进程select * fr ...

  7. SQL 经典练习题

    create database 练习题gouse 练习题go create table Student( Sno char(3) primary key, Sname char(8) not null ...

  8. MEDIA-SYSSERVICES媒体播放

    1 简单的音乐播放器 1.1 问题 本案例结合之前所学的网络和数据解析等知识完成一个网络音乐播放器,如图-1所示: 图-1 1.2 方案 首先创建一个SingleViewApplication应用,在 ...

  9. C++中 destory() 和deallocate()以及delete函数的相关性和区别性

    这里非常的绕口  需要仔细的来看看: destory(): 显示调用一个对象的析构函数 相当于释放一个对象需要释放的一些动态内存 为下次真正释放对象做准备 deallocate():真正的释放一个内存 ...

  10. FreeBSD打开DTrace支持

    主要翻译自:https://wiki.freebsd.org/DTrace FreeBSD跟Linux发行版一个比较大的差异,就是提倡源码构建.因此这里提到比较多的编译开关设置.自2012年5月后,D ...