`

javascript - trick to clone an element

阅读更多

it should worth an article specifically for this topic to clone some elements, most of the cases should be fairly straight forward to clone some elements. 

 

However, the complication comes with the internet explorer, where you have the behaviors that, when they occurs in conjuction, result in a very frustrating scenario for handling cloning. 

 

 

 

first, when cloning an element, Internet explorer copies over all event handlers onto the cloned element. Additionally, any custom expandos attached to the cloning are also carried over.

 

 

while you cannot just clone the element in IE and then remove the attached events or expandos, because ironically doing so will remove the event handlers and others from the original elements as well. 

 

the solution just clone the element, inject it into another element, then read the innerHTML of the element - and convert that back into a DOM node.

 

while it sounds all good, but is not yet the whole picture, nasty problems still exist in IE, where 

 

  1. innerHTML /outerHTML (for that matter) of an elemnt does not always relfect to the correct status, if the name attributes of input elements are changed dynamically - the new value isn't represented in the innerHTML.
  2. XML DOM elemnts does not have innerHTML (we need to look up what is the definition of innerHTML)
so the ultimate solution,put into word, would be 

Instead of a quick call tocloneNode it is, instead, serialized by innerHTML, extracted again as a DOM node, and then monkeypatched for any particular attributes that didn't carry over.

How much monkeying you want to do with the attributes is really up to you.


SO much for/of the talk, let 's take a look a portion of the jQuery's code on the node cloning. 


/**
*@Comment : this code is not supposed to be used directly, instead it is written here to show you 
* the algorithm to do cloning in libraries such as jQuery. In real use case, you may directly use the jQuery libraries
*/
function clone() {
  var ret = this.map(function () {
    if (!jQuery.support.noCloneEvent && !jQuery.isXMLDoc(this)) {
      var clone = this.cloneNode(true),
      container = document.createElement("div");
      container.appendChild(clone);
      return jQuery.clean([container.innerHTML])[0];
    } else {
      return this.cloneNode(true);
    }
  });

  var clone = ret.find("*").andSelf().each(function () {
    if (this[expando] !== undefined) this[expando] = null;
  });

  return ret;
}
 

Note that the above code uses jQuery's jQuery.clean method which converts an HTML string into a
DOM structure (which was discussed previously).
分享到:
评论

相关推荐

    Pandas-and-NumPy-Tips-Trick-and-Techniques-master.zip

    Pandas-and-NumPy-Tips-Trick-and-Techniques-master

    S-a-D-trick.rar_Join In

    在VB6(Visual Basic 6)中,"S-a-D-trick.rar_Join In" 这个主题涉及到的是文件分割与合并的技术。在处理大文件时,为了方便传输或者存储,我们可能会选择将其分割成多个小文件,而在需要使用整个文件时,则需要将...

    python-trick

    Python-trick,上传的事pdf文档

    在规定的时间内,使用鼠标控制帽子接住落下的保龄球,躲避炸弹。_Hat-Trick.zip

    在规定的时间内,使用鼠标控制帽子接住落下的保龄球,躲避炸弹。_Hat-Trick

    HLP-Trick-crx插件

    【HLP-Trick-crx插件】是一款专为解决特定网页限制而设计的浏览器扩展程序,主要用于恢复用户在浏览网页时被禁用的复制、粘贴功能,以及上下文菜单和本地高亮显示功能。这款插件特别适用于那些因为版权保护或者安全...

    深度学习领域CNN橄榄球比赛NFL目标检测(带数据集)-cnn-baseline-more-tta-trick

    语言:python 内容包括:源码、数据集、数据集描述、论文 目的:使用CNN算法在橄榄球比赛中目标检测。 带数据集很好运行,主页有搭建环境过程。主页有更多源码。 数据集描述如下: 在这场比赛中,你的任务是预测球员...

    gtg-grind-trick-generator

    gtg-grind-trick-generator PWA Web应用程序(Node.js,JS,HTML,CSS) Chrome,Safari,Firefox,Edge(Android,iOS,MacOS,Windows) 离线工作Android应用程式使用Google Workbox,Webpack制作

    py-trick-book:关于 Python 的高级提示和技巧

    Python 提示和技巧 ... git clone https://github.com/plasmashadow/py-trick-book.git 我假设您安装了 ipython 导航到目录并执行 ipython notebook 笔记: 退出间谍活动并自己阅读 或者 保持冷静,加入草帽海贼团

    tips-n-trick

    ...DOCTYPE>声明、元素、元素和元素。<!...包含元数据,如标题()、字符集(<meta charset="UTF-8">)和链接外部资源(如CSS文件)。则包含网页的可见内容,如文本、图像、链接等。...例如,使用和来定义页面头部和底部,...

    21-card-trick:在 React 中完成的 21 张卡片技巧

    React 21 卡技巧一个演示卡片技巧的React应用程序。动机该项目旨在学习如何使用 React 钩子和进行嵌套的 api 调用。 该项目不再进行。怎么玩记住 21 张卡片中的 1 张后,单击完成。 选择您的卡片所在的 3 堆中的哪一...

    vdr-hattrick-开源

    1. 下载最新版本的源代码,例如压缩包内的hattrick-0.1.6。 2. 在VDR环境中编译和安装插件。这可能需要熟悉Linux环境和基本的编译命令。 3. 配置VDR以启用Hattrick插件,并设置与Hattrick账户的连接信息。 4. 更新...

    CMCC-Trick:招惹CMCC-* WLAN

    Trick-CMCC 利用CMCC公共热点的小漏洞免费上网~~ :) sudo ./conn.sh Notice: 目前只知道我工CMCC有这特色, 其他地区尚不明确 Notice: 脚本适用于使用NetWorkManager网络sds管理工具的系统 Notice: 不必惊讶原理, ...

    HLP-绝招「HLP-Trick」-crx插件

    该扩展程序重新启用网页上的复制/粘贴功能,上下文菜单和本机突出显示功能。 支持语言:English (United States)

    Trick

    "Trick"这一主题似乎与一套特别的字体资源相关,其中包括多种不同风格的图像文件(.gif)和TrueType字体文件(.TTF)。让我们深入探讨一下这个话题。 首先,.gif 文件是一种常见的图像格式,支持透明度和动画,常...

    [Head.First.JavaScript].Michael.Morrison...

    Use the [removed] tag to tell the browser you’re writing JavaScript 11 Your web browser can handle HTML, CSS, AND JavaScript 12 Man’s virtual best friend... needs YOUR help 15 Making iRock ...

    Hattrick球场上座率概算

    Hattrick球场上座率概算 Hattrick球场上座率概算

    重修 Slope Trick(看这篇绝对够!).doc

    ### 重修 Slope Trick 技术解析 #### 一、引言 Slope Trick,作为一项优化动态规划(DP)问题的技术手段,在算法竞赛领域里占有重要地位。该技术的核心在于利用函数斜率的变化来简化计算过程,尤其是在面对那些代价...

    探讨手掌(TRICK-ARM)血管成像扫描技术在临床中的应用价值.pdf

    【手掌(TRICK-ARM)血管成像扫描技术】 手掌(TRICK-ARM)血管成像扫描技术是一种基于磁共振成像(MRI)的血管造影技术,特别针对手掌区域的血管疾病进行诊断。这项技术在临床中具有显著的应用价值,尤其在识别手掌血管...

    Trick-Rpc-Framework:一个简单的RPC框架的实现

    Trick-Rpc-Framework 是一个简单的RPC框架实现,旨在帮助开发者理解和实践RPC的基本原理。本文将深入探讨RPC框架的核心概念、设计模式以及Trick-Rpc-Framework的实现细节。 1. RPC的基本概念 RPC使得服务间的通信变...

    css-tricks:一些技巧主要基于CSS3

    4. **转换(Transforms)**:这个特性允许元素在二维或三维空间内进行旋转、缩放、平移和倾斜,无需JavaScript即可实现动态效果。使用`transform`属性,配合`rotate()`, `scale()`, `translate()`和`skew()`函数。 ...

Global site tag (gtag.js) - Google Analytics