<!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. tkinter第三章(单选和多选)RadioButton CheckButton

    最简单的CheckButton多选类 import tkinter as tk #checkButton的内容,多选 root = tk.Tk() v = tk.IntVar()#装整形变量的 #va ...

  2. 【Beta】 第三次Daily Scrum Meeting

    一.本次会议为第三次meeting会议 二.时间:10:00AM-10:20AM 地点:禹州楼 三.会议站立式照片 四.今日任务安排 成员 昨日任务 今日任务 林晓芳 查询app提醒功能模块和用户登录 ...

  3. 201521123103 《Java学习笔记》 第九周学习总结

    一.本周学习总结 1.以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 二.书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写 ...

  4. 201521123057 《Java程序设计》第11周学习总结

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

  5. 201521123092, 《java程序设计》第1周学习总结。

    #1.本周学习总结 这一周是我学习java的第一周,刚接触一门全新的编程语言,觉得还是有点困难的,很多基础性的java知识需要一点点学习,我会请教同学以及查询网上的学习资料,认真学好这一门学科. 本周 ...

  6. HTML 自动、手动切换轮播 from：金水

    .自动.手动切换轮播 body代码: <div id="tuijian"> <div class="pages" id="p1&qu ...

  7. cnpack热键

    CnPack的热键为ALt+space,当不自动补齐时按下Alt+space则会补齐

  8. Linux入门_2-基础命令

    Linux入门-基础命令 目录 日期命令date 修改时区 日历命令cal 关机启动命令halt,reboot,poweroff whoami.who.who am i.w screen ...

  9. MongoDB 复制篇

    mongoDB 复制篇 复制集简介 Mongodb复制集由一组Mongod实例(进程)组成,包含一个Primary节点和多个Secondary节点,Mongodb Driver(客户端)的所有数据都写 ...

  10. [AHOI2001]彩票摇奖

    [AHOI2001]彩票摇奖 题目描述 为了丰富人民群众的生活.支持某些社会公益事业,北塔市设置了一 项彩票.该彩票的规则是: (1) 每张彩票上印有 7 个各不相同的号码,且这些号码的取指范围为 1 ...