<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        ul{

            width: 400px;

            height: 400px;

            border: 1px solid #000;

        }

        li{

            width: 80px;

            height: 40px;

            list-style: none;

            text-align: center;

            line-height: 40px;

            border: 1px solid #000;

            float: left;

            margin: 5px;

        }

    </style>

</head>

<body>

<ul>

    <!--<li>语文<span>X</span></li>-->

</ul>

<button data-type="yw">语文</button>

<button>数学</button>

<button>英语</button>

<button>物理</button>

<button>化学</button>

<button>生物</button>

<button>政治</button>

<button>历史</button>

<button>地理</button>

<script>

    var ul=document.getElementsByTagName("ul")[0];

    //创建节点

    //var nli=document.createElement("li");

    //修改节点内容

    //nli.innerHTML="yw";

    //添加节点

    //ul.append(nli);

    var btns=document.getElementsByTagName("button");

    //var ul=document.getElementsByTagName("ul")[0];

    for(var i=0;i<btns.length;i++){

        btns[i].onclick=function(){

            //alert(this.innerHTML);

            var hasLi=false;

            //点击按钮，添加对应课程内容

            var nli=document.createElement("li");

            nli.innerHTML=this.innerHTML+"<span>X</span>";

            //通过innerHTML来判断

            var aLi=ul.getElementsByTagName("li");

            //console.log(aLi[0].innerHTML.slice(0,14));

            for(var i=0;i<aLi.length;i++){

                if(this.innerHTML==aLi[i].innerHTML.slice(0,-14)){

                    hasLi=true;

                    break;

                }else{

                    hasLi=false;

                }

            }

            if(hasLi==false){

                ul.append(nli);

            }

            //点击X，从ul中删除li;

            var span=nli.getElementsByTagName("span")[0];

            span.onclick=function(){

                ul.removeChild(this.parentNode);

            }

        }

    }

</script>

</body>

</html>

DOM 节点 课程表的更多相关文章

  1. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  2. 深入理解DOM节点关系

    × 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...

  3. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

  4. 深入理解DOM节点类型第六篇——特性节点Attribute

    × 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的 ...

  5. 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

    × 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...

  6. 深入理解DOM节点类型第一篇——12种DOM节点类型概述

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...

  7. DOM 节点的克隆与删除

    无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...

  8. DOM节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

  9. 第6章 DOM节点操作

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

随机推荐

  1. AppiumDesktop用法介绍

    转自:http://www.jianshu.com/p/bf1ca3d4ac76 写这篇文章的心情 真的很开心,我看着官网介绍竟然对AppiumDesktop略懂皮毛了.今天特意写出来,希望可以帮助一 ...

  2. 五,ESP8266 TCP服务器多连接

    一些时间去准备朋友的元器件了... 接着写,,争取今天写完所有的文章,,因为答应了朋友下周5之前要做好朋友的东西 对于TCP大家在玩AT指令的时候有没有发现客户端最多连接5个,,,再连接就不行了?? ...

  3. unity中object 对象之间用c# delegate方式进行通信

    unity 3D经常需要设计到不同object之间数据通信和事件信息触发.这里可以利用C#本身的事件和代理的方法来实现. 这里实现了在GUI上点击按钮,触发事件,移动object cube移动的例子. ...

  4. PCB Design_经验之谈

    所谓覆铜,就是将PCB上闲置的空间作为基准面,然后用固体铜填充,这些铜区又称为灌铜.敷铜的意义在于,减小地线阻抗,提高抗干扰能力:降低压降,提高电源效率:与地线相连,还可以减小环路面积.也出于让PCB ...

  5. 【2017集美大学1412软工实践_助教博客】团队作业10——项目复审与事后分析（Beta版本）

    写在前面的话 转眼轰轰烈烈本学期的软工实践就结束了,这个过程中想必在熬夜敲代码,激烈讨论中留下诸多回忆的同时,也收获了不少.恭喜所有团队完成了本阶段冲刺,此外,由于大家的贡献分给的都很平均,将个人贡献 ...

  6. 集美大学网络1413第十五次作业成绩（团队十） -- 项目复审与事后分析（Beta版本）

    题目 团队作业10--项目复审与事后分析(Beta版本) 团队作业10成绩 --团队作业10-1 Beta事后诸葛亮  团队/分值 设想和目标 计划 资源 变更管理 设计/实现 测试/发布 团队的角色 ...

  7. return 的使用

    (一):while中使用return //编译不通过,编译器不知道isTrue()方法是否会返回true,这样不能test()方法一定有返回值. public String test(){ while ...

  8. 201521123115《java程序设计》第十一周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1. ...

  9. Java Annotation注解继承说明

    有关Annotation的继承说明: 1.JDK文档中的说明是:只有在类上应用的Annotation才能被继承,而实际应用时的结果是:除了类上应用的Annotation能被继承外,没有被重写的方法的A ...

  10. PHP数组运算符

    PHP数组预算符有==(等于),===(恒等于),!=(不等于),<>(不等于),+(联合): 注意:没有-(减号)运算符: $a=array("a"=>&quo ...