<!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. Android如何使用OKHttp

    首先要在build.gradle里面写入 // 添加OKHttp支持 implementation("com.squareup.okhttp3:okhttp:4.3.1") 下面是 ...

  2. Java实现 洛谷 P1115 最大子段和

    import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner scann ...

  3. git提交拉取远程仓库

    https://gitee.com/ ---- 国内服务器 https:/github.com/ ---- 国外服务器 git init  ---- 初始化(创建主分支)仓库 git clone 拉取 ...

  4. 容器技术之Docker私有镜像仓库docker-distribution

    在前边的博客中我们说到docker的架构由docker客户端.服务端以及仓库组成:docker仓库就是用来存放镜像的地方:其实docker registry我们理解为存放docker镜像仓库的仓库比较 ...

  5. Linux的文件系统及文件缓存知识点整理

    Linux的文件系统 文件系统的特点 文件系统要有严格的组织形式,使得文件能够以块为单位进行存储. 文件系统中也要有索引区,用来方便查找一个文件分成的多个块都存放在了什么位置. 如果文件系统中有的文件 ...

  6. FTP配置多用户多目录多权限

    环境介绍 根据开发的需求 要求创建FTP服务器,把前端和后端分开用不同的FTP账号 系统环境 centos 7.4 selinux 关闭 防火墙关闭 安装FTP 很简单就一条命令 yum instal ...

  7. CentOS7 yum 安装配置 MySQL 5.7

    1.配置yum源 # 下载mysql源安装包 wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm # 安装 ...

  8. Java 多线程基础（三） start() 和 run()

    Java 多线程基础(三) start() 和 run() 通过之前的学习可以看到,创建多线程过程中,最常用的便是 Thread 类中的 start() 方法和线程类的 run() 方法.两个方法都包 ...

  9. 双剑合璧 Nacos 结合 Sentinel 实现流量安全控制

    Alibaba Sentinel 是一款高性能且轻量级的流量控制.熔断降级解决方案.是面向分布式服务架构的高可用流量控制组件. Sentinel 官网:https://sentinelguard.io ...

  10. 对 JsonConvert 的认识太肤浅了，终于还是遇到了问题

    一:背景 1. 讲故事 在开始本文之前,真的好想做个问卷调查,到底有多少人和我一样,对 JsonConvert 的认识只局限在 SerializeObject 和 DeserializeObject ...