DOM节点克隆
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节点克隆的更多相关文章
- DOM 节点的克隆与删除
无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...
- JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结
JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode 父节点 childNodes ...
- jQuery克隆DOM节点
jQuery克隆DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点
css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...
- JS 操作Dom节点之CURD
许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...
- 原生JS的DOM节点操作
DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...
- JavaScript函数使用和DOM节点
一.函数的声明与调用 1.函数声明的格式: function 函数名(参数1, 参数2,....){ 函数体代码 return 返回值:} 2.函数的调用:①直接调用:函数名(参数1的值,参数2的值, ...
- jacascript DOM节点——节点关系与操作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...
随机推荐
- NX二次开发-UFUN打开二进制STL文件函数UF_STD_open_binary_stl_file
NX9+VS2012 #include <uf.h> #include <uf_obj.h> #include <uf_modl.h> #include <u ...
- NX二次开发-关闭信息窗口UF_UI_close_listing_window
#include <uf.h> #include <uf_ui.h> UF_initialize(); //打开信息窗口 UF_UI_open_listing_window() ...
- ElasticSearch 命令执行漏洞（CVE-2014-3120）
POST /_search?pretty HTTP/1.1 Host: your-ip:9200 Accept: */* Accept-Language: en User-Agent: Mozilla ...
- 22-MySQL-Ubuntu-备份与恢复
案例: 将数据库jing_dong_1的数据库备份,然后恢复到数据库jing_dong_2; 步骤如下: 1.备份 注意: mysqldump 不是 mysql; 尖括号的方向; python.sql ...
- CSS布局标准
回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的.1998.5.12,CSS2发正式版.随后发修订版CSS2.1,纠正了CSS2中的一些错误.注意从CSS2起,CS ...
- 2019-7-29-C#-在基类定义好方法让子类继承接口就能实现
title author date CreateTime categories C# 在基类定义好方法让子类继承接口就能实现 lindexi 2019-07-29 09:57:49 +0800 201 ...
- kcptun搭建
wget --no-check-certificate https://github.com/kuoruan/shell-scripts/raw/master/kcptun/kcptun.sh sha ...
- 随笔记录 MBR扇区故障系统备份与还原 2019.8.7
系统备份: [root@localhost ~]# mkdir /abc [root@localhost ~]# mount /dev/sdb1 /abc [root@localhost ~]# dd ...
- UEditor 编辑模板
读取模板,放到ueditor中进行编辑 @model WeiXin_Shop.Models.WX_GoodsDetails @Html.Partial("_MasterPage") ...
- 校园商铺-4店铺注册功能模块-3thumbnailator图片处理和封装Util
1. 初步使用thumbnailator 1.1 下载依赖 <!-- https://mvnrepository.com/artifact/net.coobird/thumbnailator - ...