cloneNode() 方法可创建指定的节点的精确拷贝。
(可以做一个模版 然后做一个隐藏域,点击按钮就添加一个模板!)
此方法可返回所复制的节点。
该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true,它还将递归复制当前节点的所有子孙节点。否则,它只复制当前节点。
返回的节点不属于文档树,它的 parentNode 属性为 null。
当复制的是 Element 节点时,它的所有属性都将被复制。【但要注意,当前节点上注册的事件监听器函数不会被复制】(我试验了多个事件监听器,好像是可以复制,不知道是否理解有误?有知道留个言!不胜感激!!!)。
cloneNode() - 克隆节点
示例一:
————————————————————
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled1</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GBK">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
//添加子接口
function add(){
var newSub = document.all.templete.cloneNode(true);
set(newSub , document.all.subs.childNodes.length);
document.all.subs.appendChild(newSub);
}
function set(divObj , index){
divObj.id = '';
divObj.style.display = "block";
var elements = divObj.getElementsByTagName("INPUT");
for(var i=0; i<elements.length; i++){
elements[i].name = elements[i].name.replace(/\[\d*\]/, '['+index+']');
}
}
function remove(delLink){
document.all.subs.removeChild(delLink.parentNode.parentNode);
var subDivs = document.all.subs.childNodes;
for(var i=0; i<subDivs.length; i++){
set(subDivs[i] , i);
}
}
</script>
</head>
<body>
<div align="center">
<input type="button" value="添加子接口" onClick="add()"/>
</div>
<div id="subs">
<%-- 子接口层 --%>
</div>
<%-- 子接口 HTML模板 开始 --%>
<div id="templete" style="display:none;">
<div>子接口信息
<a href="#" onclick="remove(this)" title="删除该子接口" style="font-size:12px;">删除</a>
</div>
<table>
<tr>
<td><input type="text" name="name"/></td>
</tr>
</table>
</div>
<%-- 子接口 HTML模板 结束 --%>
</body>
</html>
————————————————————
实例二:
————————————————————
<!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=gbk" />
<title>cloneNode()</title>
<script language="javascript">
i=1;
function add()
{
var tableObject=new Object();
var isneed=true;
tableObject=document.getElementById("show");
//判断是否有必要添加新的输入行
for(var j=0;j<tableObject.all.tags("input").length;j++)
{
var inputs = tableObject.all.tags("input")[j];
if(inputs.type=="text" && inputs.value=="")
{
isneed=false;
}
}
//验证必填项
if(isneed)
{
//添加一行
var newTR=tableObject.insertRow();
var td0=newTR.insertCell();
var td1=newTR.insertCell();
var td2=newTR.insertCell();
var td3=newTR.insertCell();
td0.innerHTML=(++i)+'.';
td1.innerHTML='<input type="text" name="username"/>';
var newSelect=document.getElementById("sex").cloneNode(true);
newSelect.id="sex"+i;
td2.appendChild(newSelect);
td3.innerHTML='<input type="text" name="age" onchange="add()"/>';
} else{
alert("请输入必填项!");
}
}
</script>
</head>
<body>
<form>
<table id="show" 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="name"/></td>
<td>
<select name="sex" id="sex">
<option value="0" selected="selected">男</option>
<option value="1">女</option>
</select>
</td>
<td><input type="text" name="age" onchange="add()"/></td>
</tr>
</table>
<input type="button" value="添加一人" onclick="add()"/>
</form>
</body>
</html>
————————————————————
分享到:
相关推荐
在JavaScript中,`cloneNode()`方法是DOM(Document Object Model)操作中的一个重要功能,主要用于复制(克隆)DOM树中的节点及其属性。这对于创建复杂的用户界面或者动态调整页面内容时非常有用。 #### 一、...
在jQuery中,有两个主要的方法用于复制节点:`.clone()`和`.clone(true)`。它们之间的区别在于是否复制绑定的事件。`clone()`方法默认只会复制元素本身和其内部结构,不包括事件处理程序。而`clone(true)`则会同时...
- **复制节点**:`cloneNode`方法可以创建节点的副本。 - **替换节点**:`replaceChild`方法可以将一个节点替换为另一个节点。 4. **案例应用**: - **下拉菜单**:在实际开发中,节点操作常用于实现交互效果,...
在这个例子中,`$contents = $dom->getElementsByTagName($node)`查找名为`$node`的所有节点,并返回一个DOMNodeList对象。通过`$contents->length`可以获取节点的数量,而`$contents->item($i)`则用于访问列表中的...
首先,clone()方法是jQuery中用于复制节点的核心方法。clone()方法可以创建指定元素的一个深拷贝,即包括该元素本身以及其所有子节点。clone()方法有两种形式,一种是不带参数的clone(),另一种是带有布尔值参数的...
在需要复制节点的场景中,例如在购物网站中,用户可能希望通过拖放的方式将商品加入购物车。在这种情况下,就可以使用jQuery的clone()方法。这个方法不仅可以复制节点,还能复制绑定在节点上的事件处理器。例如,当...
### KETTLE 节点使用说明 #### 一、使用 SQL 查询转换(Transform SQL Query) 通过编写 SQL 语句来查询并转换数据。此步骤允许用户直接在 Kettle 中执行复杂的 SQL 查询,以便从数据库中提取所需的数据集。 ####...
3. **引入JsMind资源**:将下载的JsMind库解压后,将`jsmind.js`和`css`目录下的样式文件复制到项目中,并在HTML文件中通过`<script>`和`<link>`标签引入。 ```html <script src="jsmind.js"> ``` ### 三、基本...
然后,在JavaScript文件(例如test.js)中,我们可以在页面加载完成后使用cloneNode方法克隆这个节点: ```javascript window.onload = function() { var sourceNode = document.getElementById("div-0"); // 获取...
GoJS是一种强大的JavaScript库,专为构建交互式和可自定义的图表而设计,尤其适合创建流程图。在这个"GoJS的流程图模型demo下载,自定义流程节点"中,我们将会探讨如何利用GoJS来构建流程图,并实现节点的自定义。 ...
**dtree** 是一个JavaScript库,专用于在Web应用程序中创建和管理树形结构的控件。这个控件提供了一种高效且灵活的方式来呈现和操作数据的层级结构,广泛应用于菜单系统、文件目录展示以及组织结构图等场景。在本文...
true:完全的复制一个节点,什么叫完全呢,就是复制一切,包括他的子节点,以至于文本节点,凡是有的,一律克隆,所谓完全 false:只克隆当前节点,不克隆任何的子节点,当然也不会克隆他所包裹的文本,因为任何文本...
- `copy_node`: 复制节点 #### 五、总结 本文详细介绍了 JsTree 1.0 的基本用法及高级功能,包括环境搭建、基本配置、主题设置、UI 插件的应用以及节点的操作等。通过这些知识,读者可以更好地理解和掌握 JsTree ...
在这个“orgchart案例(js和css比较齐全)”中,我们可以找到一个完整的JavaScript和CSS实现的组织图示例。下面将详细讨论相关知识点。 1. **JavaScript与CSS**: - JavaScript:在网页动态交互中起着核心作用,...
如果想要复制节点而不移动它,可以使用`clone()`方法,然后使用这些插入方法。 理解并熟练掌握这些方法对于编写高效的jQuery代码至关重要,特别是在处理复杂的DOM操作时。它们可以帮助我们创建动态和交互性强的网页...
复制节点(`cloneNode`),以及查找节点(`getElementsByTagName`, `querySelector`, `querySelectorAll`等)。 9. **jQuery与DOM操作**: 文件还提及了jQuery库,它提供了更为简洁的方式来操作DOM元素,比如使用`$...
在DOM中,我们可以创建新节点、删除节点、移动节点以及复制节点。插入节点是指将一个新创建或已存在的节点添加到现有节点的子节点列表中。这通常涉及到两个关键方法:`insertBefore()` 和 `appendChild()`。 - `...
ZTree是一款基于JavaScript的树状菜单插件,广泛应用于网页中的数据展示和操作。它具有丰富的API接口和灵活的配置选项,支持动态加载、多选、拖拽、搜索、权限控制等多种功能。在这个"ztree全套的增删改查实例"中,...
JavaScript为我们提供了丰富的DOM操作API,允许我们创建、添加、移除、替换和复制节点。以下内容将详细解释如何使用这些API进行节点操作。 首先,创建节点是构建DOM结构的起点。在JavaScript中,创建元素节点可以...