添加或删除 HTML dom元素
添加或删除 HTML dom元素
创建新的 HTML 元素
如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div> <script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node); var element=document.getElementById("div1");
element.appendChild(para);
</script>
这段代码创建新的<p> 元素:
如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:
然后您必须向 <p> 元素追加这个文本节点:
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:
以下代码在已存在的元素后添加新元素:
删除已有的 HTML 元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
如果能够在不引用父元素的情况下删除某个元素,就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。
这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
添加或删除 HTML dom元素的更多相关文章
- JS添加或删除HTML dom元素的方法实例分析
本文实例讲述了JS代码添加或删除HTML dom元素的方法.分享给大家供大家参考,具体如下: 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...
- jQuery -> 删除/替换DOM元素
删除 删除操作很easy,直接在结果集后链式调用remove()方法就可以. 比如.要删除下面html脚本中全部的a元素.直接通过 $('a'.remove(); 就能够做到了. <h3> ...
- Javascript DOM 03 表格添加、删除 + 搜索
获取 tBodies.tHead.tFoot.rows.cells 隔行变色 鼠标移入高亮 添加.删除一行 DOM方法的使用 ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- JS DOM元素的操作(创建,添加,删除,和修改属性)
1.1 创建 DOM 元素以及相应的追加方式 1.1.1 创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...
- ztree : checkbox 选中/不选中时动态添加/删除DOM元素
先上代码. var IDMark_Switch = "_switch", IDMark_Icon = "_ico", IDMark_Span = "_ ...
- JQUERY添加、删除元素、eq()方法;
一.jQuery - 添加元素 1.append() - 在被选元素内部的结尾插入指定内容 2.prepend() - 在被选元素内部的开头插入指定内容 3.after() - 在被选元素之后插入内容 ...
- 添加和删除节点(HTML 元素)。
JavaScript HTML DOM 元素(节点) 添加和删除节点(HTML 元素). 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...
- jQuery_添加与删除元素
一.jQuery添加元素(通过 jQuery,可以很容易地添加新元素/内容.) 1.添加新的 HTML 内容,用于添加新内容的四个 jQuery 方法(都能解析HTML标签): append() - ...
随机推荐
- mysql数据库中如何查询日期在两个时间之间的关系
select * from banner where addDate between '2017-06-04' and '2017-06-06';
- 常见的web服务器软件分类
(1)ApacheApache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上.Apache源于NCSAhttpd服务器,经过多次修改,成为世界上最流行的Web服务器软 ...
- 2018.06.30 BZOJ 3932: [CQOI2015]任务查询系统(主席树)
3932: [CQOI2015]任务查询系统 Time Limit: 20 Sec Memory Limit: 512 MB Description 最近实验室正在为其管理的超级计算机编制一套任务管理 ...
- 2018.09.20 atcoder Painting Graphs with AtCoDeer(tarjan+polya)
传送门 一道思维题. 如果没有环那么对答案有k的贡献. 如果恰为一个环,可以用polya求贡献. 如果是一个有多个环重叠的双联通的话,直接转化为组合数问题(可以证明只要每种颜色被选取的次数相同一定可以 ...
- GitBash入门
转载自:http://www.cnblogs.com/randomsteps/p/5415116.html 作为一个初学者,我是跟着廖学峰老师的官方博客学习,这里只是做个笔记,哈哈,关于git的历史. ...
- 整理iOS9适配中出现的坑
一.NSAppTransportSecurity iOS9让所有的HTTP默认使用了HTTPS,原来的HTTP协议传输都改成TLS1.2协议进行传输.直接造成的情况就是App发请求的时候弹出网络无法连 ...
- knowledge_map 修改笔记
20150110 knowledge_map修改的地方: 1.dialog的调整.把结构图中的dialog(另存,新建知识点)调整到全局中(我的列表,knowledge_map_js_showKnow ...
- follow me
IM InfoSphere Information Server for Data Integration Fundamentals Bootcamp 7月15日 5 北京 IM InfoSphere ...
- WP8.1 中获取背景色和主题色
背景色: Application.Current.RequestedTheme 返回的值是一个枚举,Light 或者 Dark. 主题色: public static Color GetPhoneAc ...
- 执行Docker命令报错解决办法
shim error: docker-runc not installed on system 服务器重启以后,执行docker命令报以上错误,解决办法如下: cd /usr/libexec/do ...