<!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. git和github的重要性

    Git是一款免费.开源的分布式版本控制系统,github是全球最大的同性交友平台啊呸,说错了github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公共仓库,也就 ...

  2. 个人作业3--------个人总结（Alpha版本）

    1.问题 从第一次写博客开始,就开始意识到自己所犯的错误了,助教提醒命名规范的问题,还给了Java编码规范的链接,让自己以后能注意到这些问题. 对设计的需求分析需要团队一起,一开始分配任务是给个人分配 ...

  3. 团队作业8——第二次项目冲刺（Beta阶段）5.20

    1.当天站立式会议照片 会议内容: 本次会议为第二次会议 本次会议在陆大楼2楼召开,本次会议内容: ①:检查第一次任务完成情况 ②:做第二次任务的详细分工 ③:规定完成时间是在第三次任务之前 ④:遇到 ...

  4. 201521123117 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点 2. 书面作业 Q1代码阅读:Child压缩包内源代码 1.com.parent包中Child.java文件能否编译通过?哪句会 ...

  5. 201521123013 《Java程序设计》第9周学习总结

    1. 本章学习总结 2. 书面作业 Q1.常用异常题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? 经常出现Class ...

  6. Java课程设计-定时器

    Java课程设计--定时器 1.团队课程设计博客链接 团队博客地址 2.个人负责模块或任务说明 框架构建 时间设置面板,倒计时面板 按钮设置 3.自己的代码提交记录截图 4.自己负责模块或任务详细说明 ...

  7. 201521123067 《Java程序设计》第9周学习总结

    201521123067 <Java程序设计>第9周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 Q1.常用异常(题目5-1 ...

  8. 201521123026 《JAVA程序设计》第12周学习总结

    1. 本周学习总结 Q1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 Q1.将Student对象(属性:int id, String name,int age,d ...

  9. 201521123099 《Java程序设计》第13周学习总结

    本周学习总结 书面作业 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 1.2 telnet bbs. ...

  10. linux 环境NTP配置与开机自启动（转）

    Linux下配置NTP服务器一.前言:    默认NTP服务端口:    UDP/123    本文配置的NTP工作模式:    使用client/server方式,该方式适用于一台时间服务器接收上层 ...