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基础的动画教程,直观易懂
Jan 10 Javascript
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 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 巧用数组降低程序的时间复杂度
2010/01/01 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
PHP内置加密函数详解
2016/11/20 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
Ionic快速安装教程
2016/06/03 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
python的文件操作方法汇总
2017/11/10 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
python 实现目录复制的三种小结
2019/12/04 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
python redis存入字典序列化存储教程
2020/07/16 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
物业管理毕业生个人的求职信
2013/11/30 职场文书
投标承诺书怎么写
2014/05/24 职场文书
总经理任命书范本
2014/06/05 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技