<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            height: 200px;
            background-color: #84a42b;
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2">hello div2</div>
    <p>hello p</p>
</div>
<input type="button" value="添加p" onclick="add();">
<input type="button" value="删除p" onclick="remove();">
<script>
    function remove() {
        var ele=document.getElementById("div1");
        var last_son=ele.lastElementChild;
        ele.removeChild(last_son);
    }
    function add() {
        var ele=document.getElementById("div1");
        var son=document.createElement("p");
        son.innerHTML="hello ppp"
        ele.appendChild(son);
    }
</script>
</body>
</html>

DOM对象增删元素的更多相关文章

  1. jquery的常用操作（操作html页面的Dom对象的元素）

    一:页面加载完成时,会执行jquery的方法(不需要等待图片加载完成,只要dom结构加载完成,就执行该方法) //第一种写法: $(document).ready(function() { // 执行 ...

  2. Web自动化测试 三 ----- DOM对象和元素查找

    一.DOM对象 DOM(Document Object Model文档对象模型):将HTML的各种元素映射为JS可访问的对象.HTML文档中的所有内容都是节点,这些东西在HTML中我们称为元素. 整个 ...

  3. jQuery对象与DOM对象及互相转化

    <p id=‘’hello”></p> 普通处理,通过标准JavaScript处理: var p = document.getElementById('hello'); p.i ...

  4. （四）DOM对象和jQuery对象

    学习jQuery,需要搞清楚DOM对象和jQuery对象的关系与区别,因为两者的方法并不共用,如果搞不清楚对象类型就会导致调用错误的方法. DOM(Document Object Model)称为文档 ...

  5. JavaScript的DOM对象和jQuery对象的对比

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

  6. Dom对象总结介绍&事件介绍&增删查找标签

    1.dom有5个属性,属性内容如下 下面开始介绍Dom属性,一共有5个属性 1.document object:文档对象 2.element object:标签对象 3.test object:文本对 ...

  7. 如何通过源生js获取一个元素的具体样式值 /* getCss：获取指定元素的具体样式的属性值 curElement:[dom对象] attr:[string] */

    昨天的博客些的真的是惨不忍睹啊!!!但是我的人生宗旨就是将不要脸的精神进行到底,所以,今天我又来了.哈哈哈哈哈! 方法一:元素.style.属性名:(这个有局限性--只能获取行内样式的值,对于样式表或 ...

  8. 使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JS DOM操作（五） Window.docunment对象——操作元素

    定位: var a = document.getElementByIt( "id" ) 同辈元素 var b = a.nextSibling;            -- 找 a ...

随机推荐

  1. Java实现 LeetCode 632 最小区间（又是先序队列，官方给的是堆）

    632. 最小区间 你有 k 个升序排列的整数数组.找到一个最小区间,使得 k 个列表中的每个列表至少有一个数包含在其中. 我们定义如果 b-a < d-c 或者在 b-a == d-c 时 a ...

  2. Java实现 LeetCode 332 重新安排行程

    332. 重新安排行程 给定一个机票的字符串二维数组 [from, to],子数组中的两个成员分别表示飞机出发和降落的机场地点,对该行程进行重新规划排序.所有这些机票都属于一个从JFK(肯尼迪国际机场 ...

  3. Java实现 蓝桥杯VIP 算法提高 乘法运算

    算法提高 乘法运算 时间限制:1.0s 内存限制:512.0MB 问题描述 编制一个乘法运算的程序. 从键盘读入2个100以内的正整数,进行乘法运算并以竖式输出. 输入格式 输入只有一行,是两个用空格 ...

  4. java实现第六届蓝桥杯无穷分数

    无穷分数 无穷分数 无穷的分数,有时会趋向于固定的数字. 请计算[图1.jpg]所示的无穷分数,要求四舍五入,精确到小数点后5位,小数位不足的补0. 请填写该浮点数,不能填写任何多余的内容. 结果:0 ...

  5. vue+jquery使用FormData向后端传递数据和文件，express如何获取

    使用multiparty 模块 下载 cnpm install multiparty --save 前端代码: <template> <div class="add-are ...

  6. 用js实现简单的抛物线运动

    前言 老早就看过一些购物车的抛物线效果,也想自己凑热闹动手来实现一遍. 然后(lll￢ω￢) 书到用时方恨少,发现高中学到物理啊.数学啊,都忘光了,抛物线公式都忘了0 0. 顺手百度一波,从百度可知: ...

  7. Python之Flask框架二

    今天接着上一篇继续写一篇关于flask的随笔. 本文大纲: 1.获取请求参数 2.一个函数处理多个请求方式 3.重定向 4.错误响应 5.全局错误处理 6.返回json格式数据 7.自定义返回内容状态 ...

  8. BFART算法

    参考:https://zhuanlan.zhihu.com/p/31498036 https://www.jianshu.com/p/83bb10ad1d32

  9. LocalDateTime在项目中的使用（LocalDateTime对接前端通过时间戳互转、LocalDateTime对接数据库）

    目录 1. 博客编写背景 2. LocalDateTime 前端交互 2.1 LocalDateTime 向前端写入时间戳 2.1.1 fastJson 默认的写入格式 2.1.2 更改 fastJs ...

  10. Java中的堆和栈

    Java中的堆和栈 栈内存 存放基本数据类型和引用变量 堆内存 存放运行时创建的对象 一般来说,通过new关键字创建出来的对象都放在堆内存中 由于JVM是基于堆栈的虚拟机,而每个Java程序都运行在一 ...