DOM 创建元素 删除元素(结点)
创建新的 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 创建元素 删除元素(结点)的更多相关文章
- jQuery 源码分析(二十一) DOM操作模块 删除元素 详解
本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...
- DOM创建和删除节点、HTML DOM常用对象[转]
创建和删除节点:——核心DOM 1. 创建单个元素节点:3步: 1. 创建空元素节点对象: var elem=document.createElement("标 ...
- D3.js 插入元素,删除元素
插入元素涉及的函数有两个: 一.append():在选择集末尾插入元素 假设有三个段落元素 <p>Apple</p> <p>Pear</p> <p ...
- DOM创建和删除节点
一.创建节点 3步 1.创建空元素对象: var newElem=document.createElement("标签名"); 例如:var a=document.createEl ...
- 创建删除元素appendChild,removeChild,createElement,insertBefore
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- jQuery的DOM操作之加入元素和删除元素
加入元素: .append()--在目标元素之后加入元素. .prepend()--在目标元素之前加入元素. .after()--在目标元素之后换行加入元素: .before()--在目标元素之前加入 ...
- 抛弃jQuery:DOM API之操作元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...
- D3.js的v5版本入门教程(第五章)—— 选择、插入、删除元素
D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...
- JQ DOM元素 创建 添加 删除
创建元素 // 创建元素节点 $('<p></p>'); // 创建属性节点 $('<p class="wow"></p>'); / ...
随机推荐
- java基础之Random类
Random类 Random类中实现的随机算法是伪随机,也就是有规则的随机.在进行随机时,随机算法的起源数字称为种子数(seed), 在种子数的基础上进行一定的变换,从而产生需要的随机数字. 相同种子 ...
- Python学习day17-常用的一些模块
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- <每日一题>题目7:简单的学生管理系统V1.0
''' # 学生管理系统v1.0 # 添加学生的信息 # 删除学生的信息 # 修改学生的信息 # 查看学生的信息 #遍历学生的信息 #退出系统 ''' import json #1 显示操作功能 de ...
- 通过实体类生成建表SQL语句实现方法
import java.io.File; import java.io.FileOutputStream; import java.lang.reflect.Field; import java.ut ...
- hadoop2.x 完全分布式详细集群搭建(图文:4台机器)
在准备之前说一下本次搭建的各节点角色,进程. nameNode 进程:NameNode dataNode 进程:DataNode resourceManager :ResourceManager n ...
- property中ref、value、name的区别
转载: 版权声明:本文为CSDN博主「qq_36098284」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net ...
- csp-s模拟46 set read race
题面:https://www.cnblogs.com/Juve/articles/11556809.html Set: 题干中说的M个数两两不同是说不能重复选同一个位置的数,而不是不能选数值相同的数, ...
- vue.js_11_路由的2中参数传递和路由的嵌套
1.以?的形式传递参数 <router-link to="/login?id=10&name=zs">登录</router-link> 发送参数 ...
- PAT甲级——A1041 Be Unique
Being unique is so important to people on Mars that even their lottery is designed in a unique way. ...
- vim编辑shell
vi编辑 u撤销 i输入 dd删除游标所在的那一整行(常用) yy复制游标所在的那一行(常用) p 为将已复制的数据在光标下一行贴上 nyy n 为数字.复制光标所在的向下 n 行,例如 20yy ...