JavaScript DOM节点操作实例小结(新建,删除HTML元素)


Posted in Javascript onJanuary 19, 2017

本文实例讲述了JavaScript DOM节点操作方法。分享给大家供大家参考,具体如下:

使用DOM可以新建HTML元素,也可以删除已有的HTML元素。

(一)新建元素:

<script>
  //创建新的 <p> 元素
  var newEle=document.createElement("p");
  //创建文本节点
  var node=document.createTextNode("这是使用Javascript创建的新段落。");
  //将文本节点添加到新创建的 <p> 元素中
  newEle.appendChild(node);
  var div1_ele=document.getElementById("div1");
  //将新创建的元素添加到已有的元素中
  div1_ele.appendChild(newEle);
</script>

(二)删除HTML元素

<script>
   //删除一个元素时,必须首先获取到它的父元素
   function deleteEle(){
    var parent = document.getElementById("div_02");
    var child = document.getElementById("div_02_p2");
    parent.removeChild(child);
   }
   //使用代码获取元素的父元素
   function deleteEle3(){
    var child = document.getElementById("div_02_p3");
    child.parentNode.removeChild(child);
   }
</script>

效果图:

JavaScript DOM节点操作实例小结(新建,删除HTML元素)

示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>Javascript 节点</title>
<head>
 <style>
  body {background-color:#e6e6e6}
 </style>
</head>
<body>
 <h3>(一)添加元素</h3>
 <div id="div1">
  <p id="p1">这是一个段落</p>
  <p id="p2">这是另一个段落</p>
 </div>
 <script>
  //创建新的 <p> 元素
  var newEle=document.createElement("p");
  //创建文本节点
  var node=document.createTextNode("这是使用Javascript创建的新段落。");
  //将文本节点添加到新创建的 <p> 元素中
  newEle.appendChild(node);
  var div1_ele=document.getElementById("div1");
  //将新创建的元素添加到已有的元素中
  div1_ele.appendChild(newEle);
 </script>
 <h3>(二)删除元素</h3>
 <div id="div_02">
  <p id="div_02_p1">这是一个段落</p>
  <p id="div_02_p2">这是另一个段落</p>
  <button onclick="deleteEle()">删除id为‘div_02_p2'的元素</button><br/>
  <p id="div_02_p3">这是第三个段落</p>
  <button onclick="deleteEle3()">删除id为‘div_02_p3'的元素(自动获取父元素)</button>
  <script>
   //删除一个元素时,必须首先获取到它的父元素
   function deleteEle(){
    var parent = document.getElementById("div_02");
    var child = document.getElementById("div_02_p2");
    parent.removeChild(child);
   }
   //使用代码获取元素的父元素
   function deleteEle3(){
    var child = document.getElementById("div_02_p3");
    child.parentNode.removeChild(child);
   }
  </script>
 </div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript之bind使用介绍
Oct 09 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
jquery.validate使用详解
Jun 02 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 #Javascript
详解支持Angular 2的表格控件
Jan 19 #Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 #Javascript
JS生成一维码(条形码)功能示例
Jan 19 #Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 #Javascript
javascript中json基础知识详解
Jan 19 #Javascript
JavaScript实现垂直滚动条效果
Jan 18 #Javascript
You might like
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
PHP Array交叉表实现代码
2010/08/05 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
理解python中生成器用法
2017/12/20 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
详解Python IO口多路复用
2020/06/17 Python
python如何调用java类
2020/07/05 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
python中time tzset()函数实例用法
2021/02/18 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
党风廉设责任书
2014/04/16 职场文书
小学家长评语大全
2014/04/16 职场文书
仲裁协议书
2014/09/26 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
php字符串倒叙
2021/04/01 PHP