<!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 665 非递减数列(暴力)

    665. 非递减数列 给你一个长度为 n 的整数数组,请你判断在 最多 改变 1 个元素的情况下,该数组能否变成一个非递减数列. 我们是这样定义一个非递减数列的: 对于数组中所有的 i (1 < ...

  2. Java实现 LeetCode 104 二叉树的最大深度

    104. 二叉树的最大深度 给定一个二叉树,找出其最大深度. 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数. 说明: 叶子节点是指没有子节点的节点. 示例: 给定二叉树 [3,9,20,nu ...

  3. java实现第四届蓝桥杯组素数

    组素数 题目描述 素数就是不能再进行等分的数.比如:2 3 5 7 11 等. 9 = 3 * 3 说明它可以3等分,因而不是素数. 我们国家在1949年建国.如果只给你 1 9 4 9 这4个数字卡 ...

  4. Linux 文件特殊权限-SetGID

    SUID只针对二进制可执行文件,而SGID可以针对二进制文件,这时它和SUID非常类似,命令执行在执行程序的时候,组身份变换为该文件的属组,最常见的locate命令,普通用户也可以搜索文件目录,它也可 ...

  5. PAT 德才论

    宋代史学家司马光在<资治通鉴>中有一段著名的“德才论”:“是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人.凡取人之术,苟不得圣人,君子而与之,与其得小人,不若得愚人 ...

  6. 【整理】JVM知识点大梳理

    JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的.引入Java语 ...

  7. 逐点分析，这样做Web端性能测试

    前言: 71%用户希望在手机上打开网页能跟电脑一样快: 5秒钟被认为是用户能忍受的最长响应时间,如果响应时间超过5秒,50%的移动用户会放弃: 33%失望的用户会使用竞品替代: 用户尝试三次出现同样性 ...

  8. Spring源码之自动装配

    我们使用Spring开发过程中经常会用到Autowired注解注入依赖的bean,这部分也是面试的热点问题之一.今天咱们一起来深入研究下自动注入的背后实现原理.首先上一个例子,如下所示: @RestC ...

  9. Linux文件系统--基于EXT2

    一.文件系统基本知识 ① 存储在永久性存储介质,由程序按照某种格式制作的数据集合叫做文件 ② 磁盘上管理文件的文件.数据结构和操作构成磁盘文件系统,简称文件系统 ③ 文件属性 (1)名称 (2)位置 ...

  10. 20184302 2019-2020-2 《Python程序设计》实验四报告

    20184302 2019-2020-2 <Python程序设计>实验四报告 课程:<Python程序设计> 班级: 1843 姓名: 李新锐 学号:184302 实验教师:王 ...