javascript创建元素和删除元素实例小结


Posted in Javascript onJune 19, 2019

本文实例讲述了javascript创建元素和删除元素。分享给大家供大家参考,具体如下:

1、创建元素

动态创建新的DOM元素,是js操作网页对象模型的重要手段之一。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 创建新元素</title>
  <script type="text/javascript">
    //创建新元素
    function createNewElements(){
      //使用innerHTML创建新元素
      var p1 = document.getElementById("p1");
      //设置innerHTML内容
      p1.innerHTML = "<span>我的dom文本1</span>";
      //使用createElement来创建新元素
      var span = document.createElement("span");
      //为新元素内容创建一个文本节点
      span.appendChild(document.createTextNode("我的dom文本2"));
      var p2 = document.getElementById("p2");
      //挂接
      p2.appendChild(span);
    }
  </script>
</head>
<body style="text-align:center">
  <p>
    <input type="button" value="创建新元素" onclick="createNewElements()"/>
  </p>
  <!--定义为新元素挂接的容器元素-->
  <p id="p1"></p>
  <p id="p2"></p>
</body>
</html>

运行效果:

javascript创建元素和删除元素实例小结

创建新元素通常有2种方法:

1、直接修改父元素的innerHTML元素;

2、使用createElement()来创建,再用appendChild()进行DOM元素的挂接。

第一种方法用起来较为简单,也易于理解,但需要修改整个父元素所包含的HTML内容,若父元素原先就包含了一些HTML内容,再进行DOM挂接的话,执行效率会较低;第二种方法相对较为灵活,效率也较高,只是用起来复杂一些。

2、删除元素

删除元素指的是把这个DOM元素彻底删除,而不是隐藏。通常,使用removeChild()进行删除是最常见的方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 删除元素</title>
  <script type="text/javascript">
    //删除元素
    function deleteElement(){
      //获取准备删除的DOM
      var del = document.getElementById("del");
      //调用删除函数彻底删除
      del.parentNode.removeChild(del);
    }
  </script>
</head>
<body style="text-align:center">
  <p>
    <input type="button" value="删除元素" onclick="deleteElement()"/>
  </p>
  <!--定义被删除的元素-->
  <span id="del">即将被删除的DOM</span>
</body>
</html>

解析:

由于removeChild()是对子元素的操作,而不是自身的删除。所以,需要先获取待删除元素的父元素,然后再调用该函数。本例中,是先使用parentNode属性获得待删除元素的父元素,再删除目标元素。

3、删除所有的子元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>删除所有的子元素</title>
  <script type="text/javascript">
    //删除元素的函数
    function deleteChilds(){
      //获取父DOM
      var ul = document.getElementsByTagName('ul')[0];
      //判断是否包含子元素
      if (ul.hasChildNodes()) {
        var len = ul.childNodes.length;     //子元素的个数
        for (var i = 0; i < len; i++) {     //遍历
          ul.removeChild(ul.childNodes[0]);//从第一个元素开始删除
        }
      }
    }
  </script>
</head>
<body style="text-align:center">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
  </ul>
  </br>
  <input type="button" value="删除所有的子元素" onclick="deleteChilds()" />
</body>
</html>

解析:删除子元素,可通过js提供的removeChild()来实现。此外,需要意识到的另一点是,在遍历删除节点的过程中,每删除一个子元素,子元素的个数就会少一个,因此,示例代码始终删除的是第一个子元素,直到没有任何子元素为止。

注:

document.getElementsByTagName(“ul”) 返回的是一个数组,后面这个0是表示这个数组的第一个元素,而本网页中ul标签就一个,因此指的就是这个ul标签了。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

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

Javascript 相关文章推荐
js获取php变量的实现代码
Aug 10 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 #Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 #Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 #Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 #Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 #Javascript
JavaScript箭头函数中的this详解
Jun 19 #Javascript
基于Node.js的大文件分片上传示例
Jun 19 #Javascript
You might like
网络资源
2006/10/09 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python 换位密码算法的实例详解
2017/07/19 Python
简单了解Python中的几种函数
2017/11/03 Python
python实现汽车管理系统
2018/11/30 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
元旦联欢会主持词
2014/03/26 职场文书
二年级学生评语大全
2014/04/23 职场文书
广播体操口号
2014/06/18 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
担保贷款承诺书
2015/04/30 职场文书
心得体会格式及范文
2016/01/25 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书