<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. deepin 常用设置

    1 不开特效和动画,开启透明无黑边 #!/bin/bash #开启 metacity 窗管合成,取代正在运行的窗管 deepin-metacity --composite --replace #关闭 ...

  2. 关于java' web杂谈（其实是课后作业1）1 网站系统开发需要掌握的技术

    1 网站系统开发需要掌握的技术:(借鉴度娘)https://zhidao.baidu.com/question/1701850648247880220.html 需要掌握的有:Java(JavaEE) ...

  3. Docker理解

    近期一直在研究Docker,感悟颇深,和大家分享一下Docker 在云计算中的应用和Docker的原理. Docker 用法https://yeasy.gitbooks.io/docker_pract ...

  4. C#的数据类型总结（2）：decimal ，double，float的区别

    1> 三者是精度不同的浮点数,如下图 参见:https://docs.microsoft.com/zh-cn/dotnet/articles/csharp/language-reference/ ...

  5. Linux中如何恢复rm命令误删除的文件之extundelete编译安装及使用

    1.下载extundelete包,安装依赖 我用的是Centos系统,在安装extundelete之前需要安装e2fsprogs,e2fsprogs-libs,e2fsprogs-devel. yum ...

  6. 关于Mysql下使用Dapper QueryFirstOrDefault的问题

    1.环境 MySql:5.7.20 Dapper:1.50.2 .Net:4.5 2.遇到的问题 在开发中我发现,使用Dapper查询数据时,第一次查询正确,第二次查询就差不出来,或者直接修改数据库后 ...

  7. github搭建个人博客 hexo框架 next主题

    之前就想搭建自己的博客,现在终于得以实施. 参考了多篇博客,然后又在虚拟机了往往复复试了好多次, 现在基本搭建完毕. 我是基于hexo博客框架, next主题搭建的博客, 静态网页.   大体就是, ...

  8. CAN通讯的总结

    1.CAN通讯有套国际标准,套协议版本号,种故障状态,种数据帧类型,种总线错误类型. 2.CAN的国际标准有两种ISO11898和ISO11519. 3.CAN2.0协议分为A版和B版两种,A版协议仅 ...

  9. 我的GIS观

    申明: 文章所述观点与不论什么组织或个人无关,仅代表我个人观点,如有不正确,还望批评指正. 概述: 从毕业到如今,在GIS这条路上也算是摸爬滚打4.5年了.说长也不长,说短也不短.在这4.5年的时间里 ...

  10. Uva 10550 Combination Lock

    Sample Input0 30 0 305 35 5 350 20 0 207 27 7 270 10 0 109 19 9 190 0 0 0Sample Output13501350162016 ...