<!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. Alpha阶段-个人总结

    一.五个问题 1.第三章中提到了"质量"和"按时交付"的问题,我想问,世事难料,当两者不能兼得的时候,我是保证质量却无法按时交付,还是水两下保证按时交付呢? 2 ...

  2. 团队作业6——展示博客（Alpha）

    一.团队简介 李永豪(PM):项目经理,后台开发人员,协调团队内部的工作及开发团队之间的工作 杨海亮:后台开发人员,测试人员,熟悉java语言,编写java代码 郑靖涛:后台开发人员,测试人员,安卓程 ...

  3. 【Alpha】Daily Scrum Meeting——Day2

    站立式会议照片 1.本次会议为第二次 Meeting会议: 2.本次会议在中午12:30,在陆大楼召开,本次会议为30分钟讨论昨天的任务完成情况以及接下来的任务安排. 每个人的工作分配 成 员 昨天已 ...

  4. 201521123011 《Java程序设计》 第三周学习总结

    1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...

  5. 201521123111《Java程序设计》第2周学习总结

    1. 本章学习总结 这个星期感觉有点醉,整个人都有点迷茫,仿佛突然失去了方向,连java也难以平复所带来的焦躁的情绪.再加上认为周四早上是没有课的,所以忘记去上了.最近总感觉像咸鱼一样,无所事事,想打 ...

  6. 201521123001《Java程序设计》第12周学习总结

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

  7. Smrty模版总结（转）

    转自:http://www.cppblog.com/amazon/archive/2011/11/21/160638.html 前提:1. 部署smarty模板目录:2. 编写Smarty类的子类,定 ...

  8. HttpServletRequest获取URL、URI

    从Request对象中可以获取各种路径信息,以下例子: 假设请求的页面是index.jsp,项目是WebDemo,则在index.jsp中获取有关request对象的各种路径信息如下 import j ...

  9. php显示距当前多长时间

    <?php header("Content-type: text/html; charset=utf-8");date_default_timezone_set('PRC') ...

  10. [python学习笔记] 数据类型与语法

    数据类型 数值型 int 整形 没有long类型,可以代表任意大小的整数. type(1) -> int float 浮点数 也没有double类型 type(1.2) -> float ...