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=UTF-8">
<!--<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()"/>';
}
}
</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""/></td>
</tr>
</table>
<tr>
<td colspan="4">
<input type="button" value="添加一人" onclick="add()"/>
</td>
</tr>
</form>
</body>
</html>
分享到：
相关推荐
下面通过一个具体的例子来展示如何使用`cloneNode()`方法。 假设我们有如下HTML结构： ```html <span>1 <span>2 <span>3 ``` 我们可以使用以下JavaScript代码来克隆这个`div`及其子节点： ```javascript //...
在这个例子中，我们克隆了一个带有两个子节点的元素，并将克隆后的每个元素添加到页面中的一个父元素中。注意，我们使用了for循环来重复这个过程，以创建多个副本。当页面加载时，我们可以使用Chrome开发者工具查看...
在这个例子中，如果你在IE和Firefox中运行上述代码，会发现在点击第一个`div`时两个浏览器都会触发弹窗，但在点击第二个`div`时，Firefox不会触发弹窗而IE会。这是因为IE中`attachEvent`绑定的事件处理器在克隆节点...
在例子中，通过这两个属性可以获取到整个文档的宽度和高度，解决浏览器的兼容性问题。 4. **getElementById()**: 这个方法是根据元素的ID获取元素的常用方式。在上述removeNode()函数中，通过这个方法找到了id为...
- `getMedalsGroup()` 函数：虽然在这个例子中没有详细实现，但看起来这个函数用于获取当前选中的奖牌设置的值，可能是为了进一步的业务逻辑处理。 综上所述，这个JSP页面通过JavaScript实现了动态添加表格行的...
1.6 一个例子--JavaScript编写的计算器 1.7 学习和使用JavaScript的几点建议 1.8 关于本书的其余部分 第2章 浏览器中的JavaScript 2.1 嵌入网页的可执行内容 2.2 赏心悦目的特效 2.3 使用...
在这个例子中，我们设置了一个延时 3 秒后执行的函数，该函数会在控制台输出 "Hello after 3 seconds!"。 以上这些是 JavaScript 开发中常用的 DOM 操作方法和技术要点。掌握它们能够帮助开发者更高效地操作页面...
在给定的例子中，`20 >> 3`的结果是4（因为20的二进制表示是10100，右移三位后变成00010），然后`4 | 9`的结果是11，因为4的二进制是0100，9的二进制是1001，按位或后是1101，即十进制的13。 2. JavaScript异或运算...
在这个例子中，`Singleton`对象有一个内部函数`createInstance`用于创建实例，而`getInstance`方法检查`instance`是否存在，如果不存在，则调用`createInstance`并存储结果。这样每次调用`getInstance`时，无论调用...
在这个例子中，`#child`元素将从`#parent1`中移除，并被追加到`#parent2`中，结果是`#child`将不再出现在`#parent1`下面，而是出现在`#parent2`下面。原来的`#parent1`区域将会空出来，因为它的子元素`#child`已经被...
在这个例子中，由于提供的代码没有涉及具体的淡入淡出实现，所以这部分需要自行补充。 8. **兼容性和优化**： 考虑到不同浏览器的兼容性，确保使用的JavaScript语法能在大部分浏览器中运行。另外，优化性能，如...
在这个例子中，DOM操作包括创建新元素、修改元素属性、获取元素位置等。 3. **事件处理**： 实现拖拽功能需要对鼠标事件进行精确控制。涉及到的鼠标事件主要有： - mousedown：在用户按下鼠标按钮时触发。该事件...
并在GetBgColor获取背景色程序中使用： while (bgc == this._transparent && (node = node.parentNode) != document) { bgc = CurrentStyle(node).backgroundColor; } return bgc == this._transparent ? "#fff" :...
此方法接受两个参数：第一个是希望插入的新节点，第二个是参照节点。新节点将被插入到参照节点之前的位置，并且此方法也会返回新插入的节点。例如，将一个新创建的`li`元素添加到`ul`的第一个子节点前的代码如下： ...
在这个例子中，如果文档中存在`id`为`exampleId`的元素，则`element`变量将引用该元素；如果没有找到匹配的元素，则返回`null`。 --- ##### 2. `document.getElementsByTagName(tagName)` **功能**： 此方法返回...
在这个例子中，当用户点击“复制”按钮时，`copyrow`或`copyrowUpdate`会被调用，根据需要进行行的复制和更新；点击“删除”按钮则调用`deleteRow`删除行。此外，还有一个“添加行”按钮，它调用`addRow`函数（在...