<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. [全排列]--A Number Puzzle

    标签: ACM Lele 最近上课的时候都很无聊,所以他发明了一个数字游戏来打发时间. 这个游戏是这样的,首先,他拿出几张纸片,分别写上0到9之间的任意数字(可重复写某个数字),然后,他叫同学随便写两 ...

  2. thinkphp框架知识点

    基本配置 define('APP_DEBUG',true);//开启debug模式 //记录日志 'LOG_RECORD' => true, //系统日志在记录的时候需要开启debug调试模式, ...

  3. ASP.NET Core中的OWASP Top 10 十大风险-跨站点脚本攻击 (XSS)

    不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻喷,如觉得我翻译有问题请挪步原博客地址 本博文翻译自: https://dotnetcoretutorials.com/201 ...

  4. 51Nod--1011最大公约数GCD

    1011 最大公约数GCD 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 输入2个正整数A,B,求A与B的最大公约数. Input 2个数A,B,中间用 ...

  5. 【epubcfi函数generateRangeFromCfi和generateCfiFromRange】两者的区别和适用性，以及另一种实现

    epubcfi是描述epub规范电子书中文本位置的一种描述符,它是形如" epubcfi(/6/4[Section0017.xhtml]!4/42/178/1:0,4/42/198/1:1) ...

  6. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  7. 40.Linux应用调试-使用gdb和gdbserver

    1.gdb和gdbserver调试原理 通过linux虚拟机里的gdb,来向开发板里的gdbserver发送命令,比如设置断点,运行setp等,然后开发板上的gdbserver收到命令后,便会执行应用 ...

  8. 【HNOI2002】营业额统计

    https://www.luogu.org/problem/show?pid=2234 用Treap维护,每次查询这个数的前驱与后继哪个和它差值更小. 由于查询一个数时在Treap走出的路径必定经过它 ...

  9. 海尔U+的启发：让用户对智能家居拥有“话语权”

        近年来,智能家居成了IT产业的重要话题,随着智能家电一系列产品的出现,智能家居最终開始从概念走向落地.只是,眼下智能家居行业有个非常突出的问题------因为缺乏开放的意识,不管是产品还是理念 ...

  10. CentOS安装java and javac(java执行环境和开发环境)

    [root@localhost usr]# yum install java Loaded plugins: fastestmirror, refresh-packagekit, security R ...