最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
时间:2017-02-08 编辑:简简单单 来源:一聚教程网
本文实例讲述了JavaScript DOM节点操作方法。分享给大家供大家参考,具体如下:
使用DOM可以新建HTML元素,也可以删除已有的HTML元素。
(一)新建元素:
代码如下 | 复制代码 |
//创建新的 元素 varnewEle=document.createElement("p"); //创建文本节点 varnode=document.createTextNode("这是使用Javascript创建的新段落。"); //将文本节点添加到新创建的 元素中 newEle.appendChild(node); vardiv1_ele=document.getElementById("div1"); //将新创建的元素添加到已有的元素中 div1_ele.appendChild(newEle); |
(二)删除HTML元素
代码如下 | 复制代码 |
//删除一个元素时,必须首先获取到它的父元素 functiondeleteEle(){ varparent = document.getElementById("div_02"); varchild = document.getElementById("div_02_p2"); parent.removeChild(child); } //使用代码获取元素的父元素 functiondeleteEle3(){ varchild = document.getElementById("div_02_p3"); child.parentNode.removeChild(child); } |
效果图:
示例代码:
代码如下 | 复制代码 |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
body {background-color:#e6e6e6}
(一)添加元素
这是一个段落
这是另一个段落
//创建新的 元素 varnewEle=document.createElement("p"); //创建文本节点 varnode=document.createTextNode("这是使用Javascript创建的新段落。"); //将文本节点添加到新创建的 元素中 newEle.appendChild(node); vardiv1_ele=document.getElementById("div1"); //将新创建的元素添加到已有的元素中 div1_ele.appendChild(newEle);
(二)删除元素
这是一个段落
这是另一个段落
这是第三个段落
//删除一个元素时,必须首先获取到它的父元素 functiondeleteEle(){ varparent = document.getElementById("div_02"); varchild = document.getElementById("div_02_p2"); parent.removeChild(child); } //使用代码获取元素的父元素 functiondeleteEle3(){ varchild = document.getElementById("div_02_p3"); child.parentNode.removeChild(child); }
|
-
上一个: java冒泡排序简单实例
-
下一个: Maven的几个常用plugin
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- vue中将el-switch值true、false改为number类型的1和0解析 10-24
- Vue中的路由配置项meta使用解读 10-24
- SpringBoot自定义bean绑定解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24