实现如下的功能

非常简单的一个小训练。

思想：

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. SQL实践中的50句

    一个项目涉及到的50个Sql语句(整理版)--1.学生表Student(S,Sname,Sage,Ssex) --S 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别--2.课程 ...

  2. css2----实现三角形和带角框

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

  3. This tag and its children can be replaced by one <TextView/> and a compound drawable

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  4. MySQL数据库2 - 登录MySQL及数据库管理

    一. 登录数据库 1.使用命令窗口登录MySQL 启动Mysql服务 -> 打开命令窗口 -> 输入登录密码 具体步骤:开始菜单 - 控制面板 - 管理工具 - 服务 - Mysql56( ...

  5. codeforces 682D（DP）

    题目链接:http://codeforces.com/contest/682/problem/D 思路:dp[i][j][l][0]表示a串前i和b串前j利用a[i] == b[j]所得到的最长子序列 ...

  6. CSS盒状模型简介

    CSS盒状模型 在平时的开发过程中还是经常得写博客,这2天有个公司找我面试,在面试当中提到了CSS中的盒状模型.这个东西在平时的前端开发经常用到.以下简单介绍一下: CSS中的盒状模型由:margin ...

  7. 如何快速编写Vim语法高亮文件

    这里有一份中文的入门文档,但是太长了,不想读,所以有本文 最快的办法,就是找一个语法相近的语法高亮文件,稍微改一下 自己从头写的话,首先搞定关键字: syntax case match "是 ...

  8. springmvc工作原理以及源码分析(基于spring3.1.0)

    springmvc是一个基于spring的web框架.本篇文章对它的工作原理以及源码进行深入分析. 一.springmvc请求处理流程 二.springmvc的工作机制 三.springmvc核心源码 ...

  9. 网页左上角图标 favicon.ico

    显示网页左上角标志图标 <link rel="shortcut icon" type="image/x-icon" href="images/f ...

  10. Hive 实战(2)--hive分区分桶实战

    前言: 互联网应用, 当Mysql单机遇到性能瓶颈时, 往往采用的优化策略是分库分表. 由于互联网应用普遍的弱事务性, 这种优化效果非常的显著.而Hive作为数据仓库, 当数据量达到一定数量时, 查询 ...