实现如下的功能

非常简单的一个小训练。

思想：

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. ios中tableSection的颜色

    ios中tableSection的颜色可以用: @"0xf5f5f5",有个第三方库 #import "UIColor+expanded.h"可以支持十六进制取 ...

  2. AngularJs的UI组件ui-Bootstrap分享（三）——Accordion

    Accordion手风琴控件使用uib-accordion和uib-accordion-group指令. <script> angular.module('myApp', ['ui.boo ...

  3. AT&T asm之Qt使用

    #include <stdio.h> #include <string.h> /* 函数名: att_asm_p(); 功能:类似于Intel汇编功能:mov ebx, [OS ...

  4. 工厂方法（factory method）

    动机(Motivation) 在软件系统中,经常面临着“某个对象”的创建工作:由需求的变化,这个对象经常面临着剧烈的变化,但是它却拥有比较稳定的接口.如何应对这种变化?如何提供一种“封装机制”来隔离出 ...

  5. NSAssert的使用

    NSAssert的使用   苹果在foundation.framework中定义了这么一个宏: #define NSAssert(condition, desc, ...)   第一个参数为一个条件判 ...

  6. git 添加ssh的方法 push免登陆

    在github.com上 建立了一个小项目,可是在每次push  的时候,都要输入用户名和密码,很是麻烦 原因是使用了https方式 push 在termail里边 输入  git remote -v ...

  7. java 代码的细节优化

    前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑 的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用 ...

  8. Python 基礎 - 變量

    變量 變量主要是用來存東西,是存在內存裡 Python 變量寫法: name = "Nobody One" Shell Script 變量寫法: name="Nobody ...

  9. LeetCode() Ugly Number II 背下来！

    一个别人,非常牛逼的思路,膜拜了!orz!!!! vector <int> results (1,1); int i = 0, j = 0, k = 0; while (results.s ...

  10. Matlab数字信号处理

    产生方波 clear t=0:0.01:10; subplot(4,1,1) f1=square(t);                       %  产生周期为2pi的方波信号 plot(t,f ...