<!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. [转载]python 详解re模块

    原文地址:python 详解re模块作者:Rocky 正则表达式的元字符有. ^ $ * ? { [ ] | ( ) ．表示任意字符 ［］用来匹配一个指定的字符类别,所谓的字符类别就是你想匹配的一个字 ...

  2. (5)ES6解构赋值-函数篇

    函数参数的解构赋值 function sum(x, y) { return x + y; } sum(1,2); //解构赋值 function sum([x, y]) { return x + y; ...

  3. 转：【Java并发编程】之十：使用wait/notify/notifyAll实现线程间通信的几点重要说明

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17225469    在Java中,可以通过配合调用Object对象的wait()方法和no ...

  4. 【1414软工助教】团队作业2——需求分析&原型设计 得分榜

    题目 团队作业2--需求分析&原型设计 作业提交情况情况 本次作业所有团队都按时提交作业. 往期成绩 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目2:单元测试 ...

  5. 201521123053《Java设计与程序》第六周学习总结

    ---恢复内容结束--- 1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结.   注1:关键词与内容不求多,但 ...

  6. JAVA课设---五子棋

    1.团队博客链接 JAVA课设-五子棋-团队博客 2.个人负责模块: ①对鼠标事件的处理 , 此模块需处理五子棋的放置问题.颜色转换问题.以及当五子连线时弹出窗口显示结果. ②对MainFrame中主 ...

  7. java课程设计团队博客

    java课程设计 本组主题:Calculator(简易计算器) 功能要求:基本实现计算器的功能,可运行加.减.乘.除.求倒数.求平方根.求百分号运算.正负数运算等 一.团队介绍 团队名称:熬夜做不出随 ...

  8. iOS内购 服务端票据验证及漏单引发的思考.

    因业务需要实现了APP内购处理,但在过程中出现了部分不可控的因素,导致部分用户反映有充值不成并漏单的情况. 仔细考虑了几个付费安全上的问题,凡是涉及到付费的问题都很敏感,任何一方出现损失都是不能接受的 ...

  9. [01] Pattern类和Matcher类

    在Java中,有个java.util.regex包,这是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包. 它主要有两个类: Pattern   一个正则表达式经编译后的表现模式,可以理解为 ...

  10. Java通过链表实现队列

    class LinkedQueue<T> { /** * 队列大小,由构造函数初始化 */ private int maxSize; /** * 队头 */ private Node fr ...