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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
vuejs选中当前样式active的实例
Aug 22 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
如何手写一个简易的 Vuex
Oct 10 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 会话(session 时间设定)使用入门代码
2008/06/05 PHP
php去除重复字的实现代码
2011/09/16 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
sails框架的学习指南
2014/12/22 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
车间组长岗位职责
2013/12/20 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
会议主持词结束语
2015/07/03 职场文书