该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。
返回的节点不属于文档树，它的 parentNode 属性为 null。
当复制的是 Element 节点时，它的所有属性都将被复制。但要注意，当前节点上注册的事件监听器函数不会被复制。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>控件cloneNode（）方法的使用</title>
<script language="javascript">
i=1;
function AddRow()
{
var tableObject=new Object();
var isneed=true;
tableObject=document.getElementById("CloneNodeShow");
//判断是否有必要添加新的输入行
for(var j=0;j<tableObject.getElementsByTagName("input").length;j++)
{
var inputs = tableObject.getElementsByTagName("input")[j];
if(inputs.type=="text" && inputs.value=="")
{
isneed=false;
}
}
if(isneed)
{
//添加一行
var newTR=tableObject.insertRow(tableObject.rows.length);
var td0=newTR.insertCell(newTR.cells.length);
var td1=newTR.insertCell(newTR.cells.length);
var td2=newTR.insertCell(newTR.cells.length);
var td3=newTR.insertCell(newTR.cells.length);
td0.innerHTML=(++i)+'.';
td1.innerHTML='<input type="text" name="username"/>';
//true表示深度克隆
var newSelect=document.getElementById("sexType").cloneNode(true);
newSelect.id="sexType"+i;
td2.appendChild(newSelect);
td3.innerHTML='<input type="text" name="age" onchange="AddRow()"/>';
}
}
function addT(){
var newT=document.getElementById('CloneNodeShow').cloneNode(true);
document.body.appendChild(newT);
}
</script>
</head>
<body>
<input type="button" value="AddTable" onclick="addT();"/>
<form>
<table id="CloneNodeShow" border="2" bordercolor="#000000">
<tr><th></th><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr id="signTR" >
<td>1.</td>
<td><input type="text" name="username"/></td>
<td>
<select name="sexType" id="sexType">
<option value="%">请选择性别</option>
<option value="0">男</option>
<option value="1">女</option>
</select>
</td>
<td><input type="text" name="age" onchange="AddRow()"/></td>
</tr>
</table>
</form>
</body>
</html>
点击按钮可以深复制了整个表格，但是表格中的age文本框的onchange事件并没有被clone。
分享到：
相关推荐
XML DOM（Document Object Model）是XML文档的一种标准接口，它允许程序员和脚本语言通过对象和方法来访问、创建和修改XML文档的结构和内容。这个"XMLDOM对象方法中文手册chm"提供了关于XML DOM在中文环境下的详细...
在JavaScript中，DOM（文档对象模型）操作是实现网页动态交互的基础，而`cloneNode`方法是DOM操作中用于克隆节点的一个重要函数。了解`cloneNode`以及它在克隆文本节点时的使用技巧，对于进行DOM操作的前端开发者来...
JavaScript提供了一种简单有效的方法来实现这一点，那就是使用DOM（文档对象模型）中的cloneNode方法。cloneNode方法允许我们复制已有的节点，并且可以选择是否复制节点的子节点，即深拷贝或浅拷贝。 为了理解...
XMLDOM对象方法手册是学习和掌握XMLDOM的重要参考资料，它包含了XMLDOM提供的各种方法，帮助开发者高效地处理XML文档。以下是XMLDOM主要方法的一些详细解释： 1. **createNode**: 这个方法用于创建新的XML节点。它...
cloneNode方法 **作用：** 此方法用于复制一个节点及其所有子节点或仅复制节点本身（不包含子节点）。 **基本语法：** ```javascript xmlDocumentNode.cloneNode(deep); ``` **说明：** 参数 `deep` 是一个布尔...
`cloneNode()`方法用于复制DOM树中的节点，其参数是一个布尔值，决定了是否深拷贝节点及其子节点。当参数为`true`时，会连同子节点一起复制；为`false`时，仅复制节点自身而不包括其子节点： ```javascript var ...
在JavaScript中，`cloneNode()`方法是DOM（Document Object Model）操作中的一个重要功能，主要用于复制（克隆）DOM树中的节点及其属性。这对于创建复杂的用户界面或者动态调整页面内容时非常有用。 #### 一、...
DOM对象提供了一系列方法来操作这些节点： 1. `createAttribute(name)`：创建一个新的属性节点。 2. `createComment(text)`：创建一个新的注释节点。 3. `createElement(tagName)`：创建指定标签名的新元素节点。 4...
《JavaScript DOM编程艺术》这本书对于初学者来说非常友好，它不仅介绍了DOM的基本概念，还深入讲解了DOM的操作方法，包括创建、复制、插入、删除、替换、处理及查找节点等。本文将根据书中的内容摘要，重点解析DOM...
### JavaScript DOM操作方法详解 #### 一、概述 在JavaScript中，DOM（Document Object Model）是一种处理HTML或XML文档的标准编程接口。通过DOM，开发者能够动态地访问文档中的元素，并可以修改其结构、样式和...
本文实例讲述了DOM节点深度克隆函数cloneNode()用法。分享给大家供大家参考。 具体实现方法如下： 代码如下:<html> <head> [removed] function t(){ var nodeul = document.getElementsByTagName(...
在这个chm格式的文件“XMLDOM对象方法手册”中，很显然包含了关于XMLDOM核心对象——XMLDocument的所有方法和属性的详尽指南。 XMLDocument对象是XMLDOM的核心，它是整个XML文档的根节点，代表了一个完整的XML文件...
- **Methods**：如`appendChild()`, `replaceChild()`, `removeChild()`, `cloneNode()`等，用于操作DOM树结构。 - **Event Handlers**：如`onclick`, `onmouseover`, `onmouseout`等，用于响应用户交互。 #### DOM...
在本文中，我们将深入探讨XML DOM的一些关键属性和方法。 1. `abort` 方法 `xmlDocument.abort()` 用于在异步加载过程中取消下载。如果XML文档正在加载，调用此方法会立即终止解析过程，并释放内存中已加载的文档...
DOM节点克隆是通过调用`cloneNode()`方法实现的。这个方法接受一个布尔参数，如果为`true`，则执行深复制；如果为`false`或不传参，则执行浅复制。 1. 浅复制（Shallow Copy） 浅复制仅复制节点本身及其属性，但不...
本篇文章将深入探讨JavaScript如何利用DOM进行节点操作，包括创建、查找、修改和删除节点，以及操作DOM属性和方法。 首先，了解DOM的基本结构至关重要。DOM将HTML或XML文档视为一棵树形结构，每个节点代表文档的一...
### DOM的基本方法详解 #### 一、直接引用节点与节点查询方法 在DOM（文档对象模型）中，我们可以通过多种方式来访问或操作HTML文档中的元素。以下介绍几种常见的节点查询方法及其应用。 ##### 1. `document....
9. **DOM2级和DOM3级接口**：学习高级的DOM操作，如`createDocumentFragment`、`cloneNode`、`compareDocumentPosition`等。 10. **HTML5新特性**：如果源码包含HTML5的相关示例，可能会涵盖`localStorage`、`...
DOM提供了一系列的方法来操作这些节点： 1. `insertBefore(newChild, refChild)`：在`refChild`节点前插入`newChild`，如果`refChild`为null，则`newChild`被添加到节点的末尾。 2. `replaceChild(newChild, ...