浅谈原生JavaScript实现remove()和recover()
利用原生JavaScript实现:
1、remove(selectors)删除指定的一个或一组元素。
2、recover(selectors)恢复刚才删除的元素。
function remove(selectors) {
selectors.removeNode = [];
if (selectors.length != undefined) {
var len = selectors.length;
for (var i = 0; i < len; i++) {
selectors.removeNode.push({
parent: selectors[i].parentNode,
inner: selectors[i].outerHTML,
next: selectors[i].nextSibling
});
}
for (var i = 0; i < len; i++)
selectors[0].parentNode.removeChild(selectors[0]);
}
else {
selectors.removeNode.push({
parent: selectors.parentNode,
inner: selectors.outerHTML,
next: selectors.nextSibling
});
selectors.parentNode.removeChild(selectors);
}
}
function recover(selectors) {
var len = selectors.removeNode.length;
for (var i = 0; i < len; i++) {
var node = selectors.removeNode[i];
if (node.next == null)
node.parent.innerHTML += node.inner;
else {
var div = document.createElement("div");
div.innerHTML = node.inner;
node.parent.insertBefore(div.childNodes[0], node.next);
}
}
}
浅谈原生JavaScript实现remove()和recover()的更多相关文章
- 浅谈 原生javaScript&&react 实现全局触摸按钮(附带对addeventlistener的了解)
1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
- 浅谈 原生javaScript && react 实现全局触摸按钮(附带对addeventlistener的了解)
1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
- 浅谈原生JavaScript的动画和特效
一.JavaScript中的动画原理 动画效果的实现总的来说可分为两种,一种是利用纯css实现,该方法在css3成熟后广泛应用:另外一种是通过JavaScript(或者一些封装的库如jQuery的an ...
- 浅谈前端JavaScript编程风格
前言 多家公司和组织已经公开了它们的风格规范,详细可參阅jscs.info,以下的内容主要參考了Airbnb的JavaScript风格规范.当然还有google的编程建议等编程风格 本章探讨怎样使用E ...
- JavaScript中toStirng()与Object.prototype.toString.call()方法浅谈
toStirng()与Object.prototype.toString.call()方法浅谈 一.toString()是一个怎样的方法?它是能将某一个值转化为字符串的方法.然而它是如何将一个值从一种 ...
- 浅谈JavaScript中的内存管理
一门语言的内存存储方式是我们学习他必须要了解的,接下来让我浅谈一下自己对他的认识. 首先说,JavaScript中的变量包含两种两种类型: 1)值类型或基本类型:undefined.null.numb ...
- 浅谈ES6原生Promise
浅谈ES6原生Promise 转载 作者:samchowgo 链接:https://segmentfault.com/a/1190000006708151 ES6标准出炉之前,一个幽灵,回调的幽灵,游 ...
- 浅谈javascript的原型及原型链
浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...
- 浅谈javascript函数节流
浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
随机推荐
- phpBB3.2开发环境配置
从Github导出项目 如果只是查看代码, 可以直接clone官方的git https://github.com/phpbb/phpbb.git . 如果需要开发, 就fork一下再从自己的Git里c ...
- (原)pycharm中debugger时console如何打开
转载请注明出处; https://www.cnblogs.com/darkknightzh/p/9913439.html 使用pycharm在debugger时,旁边的console一不小心给关了.要 ...
- 在Android上启用Kiosk模式
我们的云帆机器人(上面运行的安卓程序)有一个线下场景是商场,由于商场人多,总会遇到一些用户在我们的app里乱点,然后会跳出程序进入到系统设置的一些界面,这样很不友好. 比如程序中有一些需要输入文字的地 ...
- JavaBean之lombok
参见:https://www.ibm.com/developerworks/cn/opensource/os-lombok/ http://blog.didispace.com/java-lombok ...
- C#:网络传输问题
1.Http Post Header 中文数据值,服务端接收Header 中文数据值乱码问题: 客户端: Encoding utf8Encoding = Encoding.GetEncoding ...
- 译:6.RabbitMQ Java Client 之 Remote procedure call (RPC,远程过程调用)
在 译:2. RabbitMQ 之Work Queues (工作队列) 我们学习了如何使用工作队列在多个工作人员之间分配耗时的任务. 但是如果我们需要在远程计算机上运行一个函数并等待结果呢?嗯,这 ...
- 9-8-B树-查找-第9章-《数据结构》课本源码-严蔚敏吴伟民版
课本源码部分 第9章 查找 - B树 ——<数据结构>-严蔚敏.吴伟民版 源码使用说明 链接☛☛☛ <数据结构-C语言版>(严蔚敏,吴伟民版)课本源码+习题集 ...
- kafka项目中踩到的一个坑(客户端和服务器端版本不一致问题)
启动项目时控制台抛出的异常信息: -- :: --- [ main] o.s.s.c.ThreadPoolTaskScheduler : Initializing ExecutorService 't ...
- 基于jQuery+HTML5加入购物车代码
基于jQuery+HTML5加入购物车代码.这是一款基于jquery+html5实现的支持累加计价的网站购物车代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 国内AR行业现状研究之百度的AR
AR(Augmented Reality),中文翻译增强现实.按我原来的知识体系,VR/AR的技术构成是相同的,只是追求的方向不同.VR是虚拟笼罩现实.让虚拟就是现实:AR则让虚拟进入现实.二者最终看 ...