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中的变量及作用域、undefined与null
Mar 04 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
Vue运用transition实现过渡动画
May 06 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
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获取Google AJAX Search API 数据的代码
2010/03/12 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
python中模块查找的原理与方法详解
2017/08/11 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
如何表示python中的相对路径
2020/07/08 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
Python学习之time模块的基本使用
2021/01/17 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
工程师岗位职责规定
2014/02/26 职场文书
2015年话务员工作总结
2015/04/29 职场文书
电影圆明园观后感
2015/06/03 职场文书
军训新闻稿范文
2015/07/17 职场文书
python某漫画app逆向
2021/03/31 Python
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android