JavaScript 克隆

本次学习内容：

克隆:只克隆标签和属性，不克隆文本。

克隆的功能，如果不添加使用Ture，就只会克隆标签和属性，不会克隆文本。

克隆的参数全部是节点对象,不能是字符串

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>克隆标签属性和文本</title>
  6. </head>
  7. <body>
  8. 	<div>
  9. 		<a href="https://www.sogou.com/" title="搜狗网站">搜狗</a>
  10. 	</div>
  11. 	<button>点击</button>
  12. </body>
  13. <script>
  14. /*
  15. 	克隆的对象.cloneNode(true):克隆标签属性和文本
  16. */
  17. 	//获取对象
  18. 	var btn = document.querySelector('button');
  19. 	var a = document.querySelector('a');
  20. 	var div = document.querySelector('div');
  21.  
  22. 	//按钮单击事件
  23. 	btn.onclick = function(){
  24. 		//克隆:只克隆标签和属性，不克隆文本。
  25. 		//var aClone = a.cloneNode();
  26. 		//console.log(aClone);
  27.  
  28. 		//常用的克隆方式:完整克隆：克隆标签、属性、文本。
  29. 		var aClone2 = a.cloneNode(true);
  30. 		//console.log(aClone2);
  31. 		div.appendChild(aClone2);
  32. 	}
  33.  
  34. //注意:上述方法中的参数全部是节点对象,不能是字符串
  35. </script>
  36. </html>

　　

JavaScript 克隆的更多相关文章

  1. javascript 克隆对象/数组的方法 clone()

      1 11 javascript 克隆对象/数组的方法 clone() 1 demo: code: 1 var Obj; 2 let clone = (Obj) => { 3 var buf; ...

  2. JavaScript 克隆对象

    function clone(origin) { return Object.assign({}, origin); } let aClone = { ...a }; // 等同于 let aClon ...

  3. javascript克隆一个对象

    /* * 克隆一个对象 */ com.ty.repairtech.JsonOperation.clone = function(obj) { // Handle the 3 simple types, ...

  4. JavaScript克隆数组

    /** * 克隆数组 * @param arr */ function cloneArray(arr){ var _arr=[]; for(var i=0;i<arr.length;i++){ ...

  5. js深入研究之克隆，属性，数组，对象，函数

    代码 <script type="text/javascript"> /* 克隆原型得到对象 */ function clone(object) { function ...

  6. 12.06 JavaScript

    任务 掌握JavaScript基础知识,能够使用JavaScript编写一些复杂度不大的交互功能. 任务: JavaScript基础 做完任务一的时候深深地感觉到自己的基础非常的薄弱,在这里再次感谢一 ...

  7. DOM操作-克隆元素

    代码: ———————————————————————————— <script type="text/javascript">            //克隆元素   ...

  8. a个人经验总结2

    金额 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8& ...

  9. jQuery基础修炼圣典—DOM篇（一）

    一.DOM节点的创建 1.创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. ...

随机推荐

  1. 一名Java架构师分享自己的从业心得，从码农到架构师我用了八年

    工作了挺久,发现有个挺有意思的现象,从程序员.高级程序员,到现在挂着架构师.专家之类的头衔,伴随着技术和能力的提高,想不明白的事情反而越来越多了. 这些疑问有些来自于跟小伙伴的交流,有些是我的自问自答 ...

  2. JAVA基础之序列化与反序列化

    序列化和反序列化: 把对象转化为字节序列的过程称为序列化: 把字节序列恢复为对象的过程称为对象的反序列化: 方法: Java.io.ObjectOutputStream代表对象的输出流,writeOb ...

  3. 源码实现 --> strdel

    删除字符串中某个字符strdel 函数 char *strDel(char* str,const char chToDel) 不是库里面的函数,自己实现的原型,删除str中所有的chToDel字符. ...

  4. 解决Hash碰撞冲突方法总结

    Hash碰撞冲突 我们知道,对象Hash的前提是实现equals()和hashCode()两个方法,那么HashCode()的作用就是保证对象返回唯一hash值,但当两个对象计算值一样时,这就发生了碰 ...

  5. "机器人防火墙"：人机识别在应用安全及风控领域的一点实践

    美剧 WestWorld 第二集里有个场景十分有意思:游客来到西部世界公园,遇到了一个漂亮的女接待员,但无法区分对方是否是人类,于是产生了如下对话: Guest: "Are you real ...

  6. Leetcode 24——Swap Nodes in Pairs

    Given a linked list, swap every two adjacent nodes and return its head. For example, Given 1->2-& ...

  7. alpha冲刺第六天

    一.合照 二.项目燃尽图 三.项目进展 主界面首页内容呈现 我的栏目之我的问题完成 我的栏目之我的提问完成 还是插不进去,然后打算先放一放,一直在一个地方纠结那么久脑子太乱 四.明日规划 问答界面问题 ...

  8. 团队作业2：需求分析&原型设计

    Deadline: 2017-11-5  22:00PM,以博客发表日期为准.   评分基准: 按时交 - 有分,检查的项目包括后文的三个方面 需求分析 原型设计 编码规范 晚交 - 0分 迟交两周以 ...

  9. PTA題目的處理(一）

    **題目1:A乘B** **實驗代碼** #include <stdio.h> #include <stdlib.h> int main() { signed int a,b; ...

  10. 项目Beta冲刺Day1

    项目进展 李明皇 今天解决的进度 点击首页list相应条目将信息传到详情页 明天安排 优化信息详情页布局 林翔 今天解决的进度 前后端连接成功 明天安排 开始微信前端+数据库写入 孙敏铭 今天解决的进 ...