实现如下的功能

非常简单的一个小训练。

思想：

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. linux kernel tainted

    日志中会有一些信息: dmesg | grep -i tainted 具体代码可以通过proc看到: cat /proc/sys/kernel/tainted 数字的意义: tainted: Non- ...

  2. Python开发入门与实战10-事务

    1. 事务 本章我们将通过一个例子来简要的说明“事务”,这个开发实战里经常遇到的名词.事务是如何体现在一个具体的业务和系统的实现里. 事务是通过将一组相关操作组合为一个,要么全部成功要么全部失败的单元 ...

  3. 【LeetCode OJ】Distinct Subsequences

    Problem Link: http://oj.leetcode.com/problems/distinct-subsequences/ A classic problem using Dynamic ...

  4. javascript 中的 delete

    那么,为什么我们能删除一个对象的属性: var x = { a: 1 }; delete x.a; // true x.a; // undefined 但却不能删除一个变量: var x = 1; d ...

  5. block的内部实现

    主要内容: 一.block相关的题目 二.block的定义 三.block的实现 四.捕获自动变量值 五.block存储区域 六.截获对象 一.block相关的题目 这是一篇比较长的博文,前部分是bl ...

  6. Qt资源下载、安装、配置

    (一)资源下载: 硕士毕业论文要做一个仿真平台,在linux环境下利用Qt开发. 自己有一定的c/c++基础,Qt是零基础接触.所以,经过一番查找,发现youtube一个外国友人Bryan从零开始教Q ...

  7. 创建一个maven web project

    几经周折总算是找到了和高杨学长一样的web  project的方法.感谢学长的一语点醒.我之前以为,既是maven又是web project的项目得要是通过dynamic web project转换到 ...

  8. xmind的第七天笔记

  9. Oracle 10g提权测试

    一直想摸索一下orcl提权的方式,今天测试了一下10g,可以成功提权. C:\wmpub>sqlplus scott/tiger@orcl SQL*Plus: Release 10.2.0.1. ...

  10. boost -- scoped_lock V.S. mutex lock/unlock —— why scoped_lock is recommanded?

    why scoped_lock is recommanded? 其实,这和RAII idiom变流行是一样的原因:因为你可以确保任何情况下离开执行范围都会解锁mutex. 注意,这不仅仅是说你可能忘记 ...