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>
————————————————————
分享到:
相关推荐
true:完全的复制一个节点,什么叫完全呢,就是复制一切,包括他的子节点,以至于文本节点,凡是有的,一律克隆,所谓完全 false:只克隆当前节点,不克隆任何的子节点,当然也不会克隆他所包裹的文本,因为任何文本...
serverforever使用启动服务器: forever start -l forever.log -o out.log -e err.log index.js文献资料(即将推出)例子(即将推出)贡献代替正式的样式指南,请注意保持现有的编码样式。 添加任何新功能或更改功能...
介绍基于滴滴开源的实现的自定义节点插件,让自定义节点能给简单一点,初衷是想做个爬虫的流程图,结果发现我想自定义图标和一些复制图形节点,用目前官网提供的重写感觉好难啊,我有点看不懂,定义shape的时候又卡...
3.2.5 复制节点 3.2.6 替换节点 3.2.7 包裹节点 3.2.8 属性操作 3.2.9 样式操作 3.2.10 设置和获取HTML、文本和值 3.2.11 遍历节点 3.2.12 CSS—DOM操作 3.3 案例研究——某网站的超链接和图片提示效果 3.4 小结 第4...
12.5.4 克隆节点--一个使用cloneNode()复制表格的例子 12.5.5 移动节点及其范例 12.5.6 关于添加新行和排序的小技巧 12.6 读写数据--添加、修改和删除属性 12.7 外观与行为 12.7.1 DOM样式...
nut.js(本地UI工具包) GitHub动作 主 开发 使用node.js进行本机UI测试/自动化 关于 nut.js是一个跨平台的本机UI自动化/测试工具。 它允许通过键盘和/或鼠标进行本机UI交互,但是还使您可以基于图像匹配来导航...
例子将js对象复制到a.json文件中: { str : 'str' , num : 1 , boo : true , nil : null , arr : [ 0 , ' 1 ' , true ], obj : { str : 'obj.str' , num : 1.2 , boo : false , nil : null , },} 并使用推荐的js2...
• sample39.htm 执行字符串中的JavaScript代码 • sample40.htm 判断对象属性是否为自有属性 • sample41.htm 判断一个对象是否是另一个对象的原型对象 • sample42.htm 判断对象...
摄像头控制本地网络摄像头的基本 WebRTC例子待定用法复制存储库git 克隆 获取所有必需的包安装在本地运行应用程序节点应用浏览以查看它的“运行中” 'take picture' 将拍照并在网络摄像头流下方显示流值。...
1、支持基于HTML定义、Json、XML方式加载树节点 2、支持拖放,动态增加、删除、重命名树节点 3、支持复选框 4、支持复制、剪切、粘贴树节点,动态刷新树 5、提供足够的回调方法: 6、此外,还提供了详细的使用文档 ...
关于图片复制到csdn编译器不识别问题 DOM下 1、DOM修改 2、DOM添加 3、DOM删除 案例 DOM控制css样式 1、通过style属性控制样式 2、通过classList控制样式 背景更换 背景色更换 节点写入 1、节点写入常用...
复制元素节点 替换元素节点 包裹元素节点 遍历元素 删除元素 数据管理 第4章 事件中的冒泡现象 bind方法绑定事件 映射方式绑定不同的事件 切换事件hover 切换事件toggle 移除事件unbind 其他事件one ...
3.4.1 内部插入节点方法 3.4.2 外部插入节点方法 3.5 复制节点 3.6 替换节点 3.7 包裹节点 3.8 遍历元素 3.9 删除元素 3.10 综合案例分析—数据删除和图片预览在项目中的应用 3.10.1 需求分析 ...
3.5 复制节点/66 3.6 替换节点/68 3.7 包裹节点/69 3.8 遍历元素/71 3.9 删除元素/73 3.10 综合案例分析—数据删除和图片预览在项目中的应用/75 3.10.1 需求分析/75 3.10.2 效果界面/75 3.10.3 功能实现/77...
维克隆尼 克隆DOM元素的Vue组件 ...例子 <!-- Add the "v-cloneya-input" directive to elements you wish to set v-bind:value --> <!-- Only input, select, radio, checkbox etc.
递归复制 简单、灵活的文件复制实用程序 特征 递归复制整个目录层次结构 通过传递过滤器函数、正则表达式或 glob 来选择复制哪些文件 动态重命名文件,包括更改输出路径 使用流转换文件内容 选择是否覆盖现有文件 ...
配置将 env.js.production 或 env.js.sandbox 复制到 env.js 文件中。 如果您使用设置和检索用户身份验证令牌的调用(这些调用是:GetSessionID、FetchToken、GetTokenStatus 和 RevokeToken),请将 appkeys.js....
API,###安装 npm install -g fs-enhance###API ####fsEnhance.copyFile 复制文件######范围: src : String源文件路径target : String目标文件路径cb : Function发生错误的回调######例子: var ...
注重实战,通过实际中的案例为读者讲解使用MongoDB时遇到的各种问题,并给出了解决方案。本书旨在帮助云计算初学者迅速掌握MongoDB数据库,提升读者在云计算实践中的应用和开发能力。同时本书极强的系统性和大量翔实...
命题nominatim是一个基本节点模块,用于通过 (OSM)处理地理编码和反向地理编码。 它尝试遵守。例子var nominatim = require('nominatim');nominatim.search({ q: 'Adelaide, 5000, South Australia, Australia'}, ...