创建新的 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. oracle日志

    UTL_FILE.FOPEN(location in varchar2, filename in varchar2, open_mode in varchar2) return FILE_TYPE; ...

  2. leetcode算法题笔记|two sum

    题目: 我的答案: /** * @param {number[]} nums * @param {number} target * @return {number[]} */ var twoSum = ...

  3. 组件:参数验证props:组件参数验证语法

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  4. Maven实战02_Maven的安装和配置

    1:在Windows上安装Maven 本人系统环境:win10  + JDK1.8 + apache-maven-3.3.9 在安装Maven之前,首先要确定你的Java环境是否已经配置好了,你是否已 ...

  5. javascript date utc

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/huangbin10025/article/details/37503465 近期在使用highsto ...

  6. JS的闭包问题

    1.什么是“闭包” 是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 2.闭包的应用场景 (1)保护变量的安全实现JS私有属性和私有方法 (2)在 ...

  7. struts2-OGNL表达式-OGNL与Struts2的结合

    1 OGNL表达式 OGNL:对象视图导航语言. ${user.addr.name} 这种写法就叫对象视图导航.OGNL不仅仅可以视图导航.支持比EL表达式更加丰富的功能. 1.1 使用OGNL 导包 ...

  8. create_pascal_tf_record.py 生成的record一直为0字节

    后面发现这个错误原来是自己Main目录下的train.txt中间没东西

  9. Codeforces Round #466 (Div. 2) 题解940A 940B 940C 940D 940E 940F

    Codeforces Round #466 (Div. 2) 题解 A.Points on the line 题目大意: 给你一个数列,定义数列的权值为最大值减去最小值,问最少删除几个数,使得数列的权 ...

  10. ionic4环境搭建

    1.下载安装node 下载地址:https://nodejs.org/en/ 安装后,win+R输入cmd,回车运行cmd命令窗口,输入下面的命令验证node是否安装成功: 如果出现上图所示,则证明n ...