var newDiv = red.cloneNode();
document.body.appendChild(newDiv);
注意：
1、默认只克隆元素本身；设置参数为true，进行深度克隆，可以克隆元素的子元素等所有元素
2、元素绑定的事件并不会随着元素的克隆而被携带

===========================相关示例代码如下================================

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>DOM节点克隆</title>

<style>

*{

margin: 0;

padding: 0;

}

.red{

width: 200px;

height: 200px;

background: pink;

border-radius: 50%;

margin-top: 20px;

margin-left: 20px;

}

.green{

width: 100px;

height: 100px;

background: green;

border-radius: 50%;

margin:0 auto;

}

#clon1,#clon2{

margin-left: 50px;

margin-top: 30px;

width: 120px;

height: 30px;

}

</style>

</head>

<body>

<div class="red">

<div class="green"></div>

</div>

<button id="clon1">克隆节点本身</button>

<button id="clon2">克隆全部</button>

<script>

var red = document.querySelector('.red');

var clon1 = document.getElementById('clon1');

var clon2 = document.getElementById('clon2');

//注意：克隆的元素没有携带原有元素绑定的事件

red.onclick = function(){

this.style.background = 'black';

}

//单击按钮，克隆节点

clon1.onclick = function(){

//克隆节点,并追加到body中

var newDiv1 = red.cloneNode();  //这样只能克隆元素本身；添加参数true,可以全部克隆

document.body.appendChild(newDiv1);

}

//深度克隆

clon2.onclick = function(){

var newDiv2 = red.cloneNode(true);

document.body.appendChild(newDiv2);

}

</script>

</body>

</html>

DOM节点克隆的更多相关文章

  1. DOM 节点的克隆与删除

    无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...

  2. JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

    JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes     ...

  3. jQuery克隆DOM节点

    jQuery克隆DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  4. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  5. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

  6. JS 操作Dom节点之CURD

    许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...

  7. 原生JS的DOM节点操作

    DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...

  8. JavaScript函数使用和DOM节点

    一.函数的声明与调用 1.函数声明的格式: function 函数名(参数1, 参数2,....){ 函数体代码 return 返回值:} 2.函数的调用:①直接调用:函数名(参数1的值,参数2的值, ...

  9. jacascript DOM节点——节点关系与操作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...

随机推荐

  1. win7 设置双屏壁纸

    http://dualmonitortool.sourceforge.net/ http://www.displayfusion.com/Features/Wallpaper/ 以第一个软件为例: 1 ...

  2. Python环境出现模块找不到

    由于上周脚受伤了,修养了几天没有学习.今天去实验室发现我的编译器跑不动了,出现找不到模块的情况,很奇怪都安装了,也不会提示什么模块找不到. 查找了些资料,发现是因为某个模块的文件损坏或者被覆盖或者安装 ...

  3. css样式高级技巧-选择器

    用<div>元素为网页 在编写样式表时,我们经常要用div元素来包装内容: <div> <p>Here are two paragraphs of content& ...

  4. java中的反射机制和javaBean

    反射 反射:就是通过一个类加载进方法区时加载到栈内存中的Class字节码文件对这个类进行解剖 通过反射可以获取到一个类的构造方法,成员方法,成员变量 反射将一个类的各个部分映射成相应的类 反射获取构造 ...

  5. Python从入门到精通视频（全60集）✍✍✍

    Python从入门到精通视频(全60集)  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看 ...

  6. Southern African 2001 Stockbroker Grapevine /// Floyd oj1345

    题目大意: 输入n 接下来n行 每行输入m 接下来m对a,b 若干个人之间会传播谣言,但每个人传播给其他人的速度都不一样, 问最快的传播路线(即耗时最短的)中最耗时的一个传播环节. 如果其中有人不在这 ...

  7. sparkStreaming的transformation和action详解

    根据Spark官方文档中的描述,在Spark Streaming应用中,一个DStream对象可以调用多种操作,主要分为以下几类 Transformations Window Operations J ...

  8. log-slave-updates参数

    从库做为其他从库的主库时 log-slave-updates参数是必须要添加的,因为从库要作为其他从库的主库,必须添加该参数.该参数就是为了让从库从主库复制数据时可以写入到binlog日志,为什么要用 ...

  9. spark安装及配置

    windows下spark的安装与配置教程 Windows下安装spark windows下搭建spark环境出现ChangeFileModeByMask error (3): ??????????? ...

  10. RabbitMQ学习第二记：工作队列的两种分发方式，轮询分发（Round-robin）和 公平分发（Fair dispatch）

    1.什么是RabbitMQ工作队列 我们在应用程序使用消息系统时,一般情况下生产者往队列里插入数据时速度是比较快的,但是消费者消费数据往往涉及到一些业务逻辑处理导致速度跟不上生产者生产数据.因此如果一 ...