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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 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
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
PHP云打印类完整示例
2016/10/15 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
语义化 H1 标签
2008/01/14 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
Python实现的简单发送邮件脚本分享
2014/11/07 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Python编程argparse入门浅析
2018/02/07 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
Python3运算符常见用法分析
2020/02/14 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
生物科学专业自荐书
2014/06/20 职场文书
学校证明范文
2015/06/24 职场文书
导游词之河北邯郸
2019/09/12 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python