实现如下的功能

非常简单的一个小训练。

思想：

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. fck编辑器漏洞想到的--目录的执行权限

    结合近来我遇到的问题,转一篇关于目录的执行权限问题.来解决fck编辑器的漏洞.漏洞就是给人家上传了文件,而且还遍历目录或者直接执行文件,,非常大大的危险. 解决方法如下. 1,首先要删除fckedit ...

  2. C++ Daily 《4》----一个简单的 int to string 的方法

    经常会在项目中用到 int to string, 之前一般用C语言的 sprintf, 发现C++ 中的 ostringstream 可以轻松完成这个任务. #include <iostream ...

  3. 拔靴法--Bootstrap--R语言实现

    拔靴法属于重复抽样(resampling)方法,与Monte Carlo相比,二者真实的母体不同.它是将已有的观察值作为母体重复抽样, 以求取原先资料不足二无法探讨的资料特性. 举个例子,假设x1,x ...

  4. （实用篇）php数组查找函数in_array()、array_search()、array_key_exists()使用

    php在数组中查找指定值是否存在的方法有很多,记得很久以前我一直都是傻傻的用foreach循环来查找的,下面我主要分享一下用php内置的三个数组函数来查找指定值是否存在于数组中,这三个数组分别是 in ...

  5. C#基础知识系列十(集合)

    前言 本节主要是来了解学习集合,以方便在程序编写时,什么地方该选用什么集合,让程序更健壮的运行起来.在学习了解集合之前,首先需要了解一些数据结构方面的知识.下面我们就先简单的来看一下数据结构. 数据结 ...

  6. TCP链接时主动close时可能的rst报文

    阿里核心系统团队博客http://csrd.aliapp.com/?p=1055记录了主动关闭TCP socket时,可能不发fin包,而是发rst的问题. 其原因是主动关闭socket时,若接收bu ...

  7. kernel/Makefile

    ## Makefile for the linux kernel.## Note! Dependencies are done automagically by 'make dep', which a ...

  8. i++; 与 ++i;的内部区别。

    对于一个用前置自加和后置自加的效果相同的地方,我们应该用哪个呢? 例: for(point i = 0; i != N; ?): 上面for语句中的“?”处,你会在那里写i++还是++i呢? 前置++ ...

  9. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  10. Windows下Faster-RCNN的使用

    上一篇随笔中包含了关于faster rcnn的介绍. 安装与使用 1.下载Faster R-CNN源码(https://github.com/ShaoqingRen/faster_rcnn)2.安装 ...