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 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
JavaScript 事件的一些重要说明
Oct 25 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
create-react-app开发常用配置教程
Jun 25 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
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
Vue可自定义tab组件用法实例
2019/10/24 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
python将字符串转换成数组的方法
2015/04/29 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
python 字典访问的三种方法小结
2019/12/05 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
Python生成词云的实现代码
2020/01/14 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
python文件读取失败怎么处理
2020/06/23 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
pandas按条件筛选数据的实现
2021/02/20 Python
迪奥官网:Dior.com
2018/12/04 全球购物
运动会稿件50字
2014/02/17 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
防汛通知
2015/04/25 职场文书
负责培养人意见
2015/06/05 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript