<body>

     <div id="div1">

         <p id="p1">第一段</p>

         <p id="p2">第二段</p>

     </div>

     <!--

         DOM :文档对象模型

         1、创建新的 HTML元素

             创建该元素

             找一个已存在的元素，去追加元素；

             <div id="div1">

                 <p id="p1">第一段</p>

                 <p id="p2">第二段</p>

             </div>

         2、删除已有HTML元素

             须找到要删除元素的父元素，再删除子元素

         -->

     <script>

         var param = document.createElement("p");

         var node = document.createTextNode("这是新文本");

         param.appendChild(node);

         var ele = document.getElementById("div1");

         var child = document.getElementById("p1");

         //添加元素

         ele.appendChild(param);

         //删除元素

         ele.removeChild(child);

     </script>

 </body>

js基础：对DOM进行操作，删除、添加元素的更多相关文章

  1. 【2017-03-28】JS基础、DOM操作

    一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...

  2. js基础例子dom+原型+oop基础知识记录01

    //oo:概念是计算机中对于现实世界的理解和抽象的方法 //由计算机利用编程技术发展到现在的产物 //面向对象几要素 //对象:由属性和方法组成的集合 //属性:保存数据,存储在对象内存空间中的唯一的 ...

  3. JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作

    html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick=&q ...

  4. js基础篇(dom操作，字符串，this等)

    首先我们来看这样一道题 <div id='foo' class='aa bb cc'></div>写出如何判断此div中是否含有aa(注:aa成立,aaa不成立) 首先,我们一 ...

  5. 【JS基础】DOM操作

    appendChild() //向节点添加最后一个子节点 createElement() //创建元素节点 createTextNode() //创建文本节点,字符串值

  6. JavaScript (JS)基础：DOM 浅析 (含数组Array、字符串String基本方法解析)

    ①文本对象document: 例如:document.getElementById()    只获取一个对象          document.getElementsByTagName()   获取 ...

  7. Js基础知识1-数组操作全解

    数组操作全解 js变量类型 var string; var name = "student",age=12; //underfined.null.boolean.string.nu ...

  8. js基础之DOM中元素对象的属性方法

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    ...

  9. HTML基础之DOM常用操作

    DOM(Document Object Model ),文档对象模型,主要用于对HTML和XML文档的内容进行操作. 一.查找节点 直接获取标签 document.getElementById('i1 ...

  10. js基础之DOM

    一.创建子节点 发帖在顶部显示: var oBtn = document.getElementById('btn1'); var oUl = document.getElementById('ul1' ...

随机推荐

  1. 【转】Visual Studio Code 使用Git进行版本控制

    原文链接:https://www.cnblogs.com/xuanhun/p/6019038.html?utm_source=tuicool&utm_medium=referral 本来认为此 ...

  2. 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上

    .table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6r ...

  3. Linux 链接详解----静态链接实例分析

    由Linux链接详解(1)中我们简单的分析了静态库的引用解析和重定位的内容, 下面我们结合实例来看一下静态链接重定位过程. /* * a.c */ ; void add(int c); int mai ...

  4. 简单的Spring Web工程跳转且传参Demo

    jdbc.properties jdbc.driverClassName=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://192.168.1.136:3306/ ...

  5. bootstrap-select多选下拉列表插件使用小记

    下载插件 插件地址:http://silviomoreto.github.io/bootstrap-select/ 下载好后引用css和js文件 <!-- 因为是jquery插件,所以引用前先引 ...

  6. C#设计模式之二十策略模式（Stragety Pattern）【行为型】

    一.引言   今天我们开始讲"行为型"设计模式的第七个模式,该模式是[策略模式],英文名称是:Stragety Pattern.在现实生活中,策略模式的例子也非常常见,例如,在一个 ...

  7. Linux权限相关操作命令

    以下是关于创建用户,设置用户密码,以及查看文件权限,给用户设置权限的一系列操作过程. #查看当前用户的信息[root@VM_64_7_centos tmp]# iduid=0(root) gid=0( ...

  8. 如何在Raspberry Pi 3B中安装RASPBIAN

    RASPBIAN简介 RASPBIAN是树莓派官方支持的基于Debian的Linux系统.RASPBIAN预装了很多常用的组件,使用起来十分方便. 官方有RASPBIAN STRETCH WITH D ...

  9. hdu4932 Miaomiao&#39;s Geometry （BestCoder Round #4 枚举)

    题目链接:pid=4932" style="color:rgb(202,0,0); text-decoration:none">http://acm.hdu.edu ...

  10. OD调试程序经常使用断点大全

    经常使用断点  拦截窗体:  bp CreateWindow 创建窗体  bp CreateWindowEx(A) 创建窗体  bp ShowWindow 显示窗体  bp UpdateWindow ...