创建新的 HTML 元素

如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

<script>
var para=document.createElement("p"); //创建元素结点
var node=document.createTextNode("This is new."); //创建文本结点
para.appendChild(node); //插入结点 var element=document.getElementById("div1");
element.appendChild(para);
</script>

删除已有的 HTML 元素

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child); //通过父节点删除子节点 removeChild
</script>

如果能够在不引用父元素的情况下删除某个元素,就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素

//常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:

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

DOM 创建元素 删除元素(结点)的更多相关文章

  1. jQuery 源码分析(二十一) DOM操作模块 删除元素 详解

    本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...

  2. DOM创建和删除节点、HTML DOM常用对象[转]

    创建和删除节点:——核心DOM   1. 创建单个元素节点:3步:      1. 创建空元素节点对象:         var elem=document.createElement("标 ...

  3. D3.js 插入元素,删除元素

    插入元素涉及的函数有两个: 一.append():在选择集末尾插入元素 假设有三个段落元素 <p>Apple</p> <p>Pear</p> <p ...

  4. DOM创建和删除节点

    一.创建节点 3步 1.创建空元素对象: var newElem=document.createElement("标签名"); 例如:var a=document.createEl ...

  5. 创建删除元素appendChild,removeChild,createElement,insertBefore

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. jQuery的DOM操作之加入元素和删除元素

    加入元素: .append()--在目标元素之后加入元素. .prepend()--在目标元素之前加入元素. .after()--在目标元素之后换行加入元素: .before()--在目标元素之前加入 ...

  7. 抛弃jQuery:DOM API之操作元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...

  8. D3.js的v5版本入门教程(第五章)—— 选择、插入、删除元素

    D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...

  9. JQ DOM元素 创建 添加 删除

    创建元素 // 创建元素节点 $('<p></p>'); // 创建属性节点 $('<p class="wow"></p>'); / ...

随机推荐

  1. Cooki and Session

    目录 Cookie Cookie的由来 什么是Cookie Cookie的原理 查看Cookie Django中操作Cookie 获取Cookie 设置Cookie 删除Cookie Session ...

  2. Lua程序设计之数值

    (摘自Lua程序设计) 数值常量 从Lua5.3版本开始Lua语言为数值格式提供了两种选择:被称为integer的64位整形和被称为float的双精度浮点类型(注意,"float" ...

  3. [转]WPF中的动画

    WPF中的动画                                                                                  周银辉 动画无疑是WP ...

  4. SQL中distinct 和 row_number() over() 的区别及用法

    1 前言 在咱们编写 SQL 语句操作数据库中的数据的时候,有可能会遇到一些不太爽的问题,例如对于同一字段拥有相同名称的记录,我们只需要显示一条,但实际上数据库中可能含有多条拥有相同名称的记录,从而在 ...

  5. AppbarLayout的简单用法

    在许多App中看到, toolbar有收缩和扩展的效果, 例如:   appbar.gif 要实现这样的效果, 需要用到: CoordinatorLayout和AppbarLayout的配合, 以及实 ...

  6. Java常用的数据结构

    collection : List:arrayList,linkedList,vector set:treeSet ,hashSet; map: hashMap treeMap linkedHashM ...

  7. JasperReports报表数据源10

    数据源的结构数据容器.同时生成报告,Jasper报表引擎获得来自数据源的数据.数据可以从数据库,XML文件,对象数组和集合中的对象来获得.我们将在本章填充报告所看到的fillReportXXX()方法 ...

  8. MR过程解析(转自about云)

     图中1:表示待处理数据,比如日志,比如单词计数图中2:表示map阶段,对他们split,然后送到不同分区图中3:表示reduce阶段,对这些数据整合处理.图中4:表示二次mapreduce,这个是m ...

  9. Python numpy.transpose 详解

    前言 看Python代码时,碰见 numpy.transpose 用于高维数组时挺让人费解,通过一番画图分析和代码验证,发现 transpose 用法还是很简单的. 正文 Numpy 文档 numpy ...

  10. golang包引用

    一.我的GOPATH环境变量值如下图: 二.在GOPATH路径下面的的src目录下面的目录名称就是引用里面包的起始位置,如下图: 三.举例说明:这里引用同一个项目的包,源文件“learn/main/m ...