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 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 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
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
深入讲解Python编程中的字符串
2015/10/14 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
python处理html转义字符的方法详解
2016/07/01 Python
教你学会使用Python正则表达式
2017/09/07 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
python 编写简单网页服务器的实例
2018/06/01 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
python生成任意频率正弦波方式
2020/02/25 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
义和团口号
2014/06/17 职场文书
临床专业自荐信
2014/06/22 职场文书
五四演讲稿范文
2014/09/03 职场文书
交通事故案件代理词
2015/05/23 职场文书
物业保洁员管理制度
2015/08/05 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
python画条形图的具体代码
2022/04/20 Python
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python