<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            height:800px;
            width: auto;
            background-color: #204982;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">hello div</div>
        <p id="p">hello p</p>
    </div>
    <input type="button" value="增加" onclick="func1()">
    <input type="button" value="删除" onclick="func2()">

    <script>

        function func1() {
            var ele=document.getElementById("div1");  //增加必须找到要增加标签的父级标签
            var add_son=document.createElement("p");   // 这是一个创建P标签的方法 
            ele.appendChild(add_son);                  // 这是给父级标签添加一个孩子
            add_son.innerHTML="<b>添加成功！</b>"      // 给新添加的子标签 加上文本 也可以加上标签，引号内对于innerHTML来说都是字符串
        }
        function func2() {
            var ele=document.getElementById("div1");    //删除与增加一样，同样要找到父级标签
            var del_son=ele.lastElementChild;          // 指明要删除的标签在最后的位置(last)
            ele.removeChild(del_son);                  // remove方法删除父级下的子标签
        } 
    </script>
</body>
</html>

js 中标签的增删 方法的更多相关文章

  1. JS获取标签内容的方法

    JS获取标签内容的方法 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. node.js中的url.parse方法使用说明

    node.js中的url.parse方法使用说明:https://blog.csdn.net/swimming_in_it_/article/details/77439975 版权声明:本文为博主原创 ...

  3. JS中 call() 与apply 方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  4. JS中定义类的方法

    JS中定义类的方式有很多种: 1.工厂方式    function Car(){     var ocar = new Object;     ocar.color = "blue" ...

  5. js中this和回调方法循环-我们到底能走多远系列（35）

    我们到底能走多远系列(35) 扯淡: 13年最后一个月了,你们在13年初的计划实现了吗?还来得及吗? 请加油~ 主题: 最近一直在写js,遇到了几个问题,可能初入门的时候都会遇到吧,总结下. 例子: ...

  6. js中object的申明方法

    //js中的对象申明使用new Object(); //object类型的数据类似于数组通过下表来访问其中的值 //example1 var person=new Object(); person.n ...

  7. JS中令人发指的valueOf方法介绍

    彭老湿近期月报里提到了valueOf方法,兴致来了翻了下ECMA5里关于valueOf方法的介绍,如下: 15.2.4.4 Object.prototype.valueOf ( ) When the ...

  8. js 中读取JSON的方法探讨

    方法一:函数构造定义法返回 var strJSON = "{name:'json name'}";  //得到的JSONvar obj = new Function("r ...

  9. JS中定义类的方法<转>

    转载地址:http://blog.csdn.net/sdlfx/article/details/1842218 PS(个人理解): 1) 类通过prototype定义的成员(方法或属性),是每个类对象 ...

随机推荐

  1. mvc 高并发解决方案之一---存储过程

    MVC用户访问多线程,一般的lock是无法造成单例的. 存储过程既是一种解决方案,先来看看存储过程优缺点: A. 存储过程允许标准组件式编程 存储过程创建后可以在程序中被多次调用执行,而不必重新编写该 ...

  2. 《C#多线程编程实战》2.5 AutoResetEvent

    这个有点像是缩小版的mutex 还是很好理解的 相对mutex 使用的范围可能比较小一点. class Program { static AutoResetEvent work = new AutoR ...

  3. NSTimeZone时区

    前言 NSTimeZone 表示时区信息. 1.NSTimeZone 时区的创建 NSTimeZone *zone1 = [[NSTimeZone alloc] init]; // 根据时区名称创建 ...

  4. 「BZOJ 3123」「SDOI 2013」森林「启发式合并」

    题意 你有一个森林,你需要支持两个操作 查询两个结点路径上权值第\(k\)小 两个点之间连一条边 强制在线,结点数\(\leq 8\times 10^4\) 题解 如果可以离线,这就是一个主席树板子题 ...

  5. 【bzoj2330】: [SCOI2011]糖果 图论-差分约束-SPFA

    [bzoj2330]: [SCOI2011]糖果 恩..就是裸的差分约束.. x=1 -> (A,B,0) (B,A,0) x=2 -> (A,B,1)  [这个情况加个A==B无解的要特 ...

  6. 【BZOJ2839】集合计数 容斥原理+组合数

    Description 一个有N个元素的集合有2^N个不同子集(包含空集),现在要在这2^N个集合中取出若干集合(至少一个),使得 它们的交集的元素个数为K,求取法的方案数,答案模1000000007 ...

  7. win8.1 开启企业模式

      1,Win+R Gpedit.msc 2, 3,   4,F12   多了一项企业模式

  8. JsonToHtml

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. springcloud微服务 总结一

    一 什么是微服务 译文: 微服务架构是一种架构模式,它提倡将单一应用程序划分成一组小的服务,服务之间互相协调.互相配合,为用户提供最终价值.每个服务运行在其独立的进程中,服务与服务间采用轻量级的通信机 ...

  10. 【算法笔记】B1047 编程团体赛

    1047 编程团体赛 (20 分) 编程团体赛的规则为:每个参赛队由若干队员组成:所有队员独立比赛:参赛队的成绩为所有队员的成绩和:成绩最高的队获胜. 现给定所有队员的比赛成绩,请你编写程序找出冠军队 ...