`
younglibin
  • 浏览: 1211177 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js中cloneNode()的使用 两个例子

    博客分类：
  • js
JavaScriptCSSHTMLXHTMLJ# 
阅读更多

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>子接口信息&nbsp;
<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>

 

1
顶
0
踩
分享到：
| 正则表达式中 g m $ ^ i
评论
1 楼 fanjf 2012-02-25  
当复制的是 Element 节点时，它的所有属性都将被复制。但要注意，当前节点上注册的事件监听器函数不会被复制。

这句话没有看懂，楼主能否解释下，或者给个事件监听器函数不能复制的例子
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript 拷贝节点cloneNode()使用介绍.docx

    下面通过一个具体的例子来展示如何使用`cloneNode()`方法。 假设我们有如下HTML结构： ```html &lt;span&gt;1 &lt;span&gt;2 &lt;span&gt;3 ``` 我们可以使用以下JavaScript代码来克隆这个`div`及其子节点： ```javascript //...

    JavaScript 用cloneNode方法克隆节点的代码

    在这个例子中，我们克隆了一个带有两个子节点的元素，并将克隆后的每个元素添加到页面中的一个父元素中。注意，我们使用了for循环来重复这个过程，以创建多个副本。当页面加载时，我们可以使用Chrome开发者工具查看...

    javascript dom操作之cloneNode文本节点克隆使用技巧

    在这个例子中，如果你在IE和Firefox中运行上述代码，会发现在点击第一个`div`时两个浏览器都会触发弹窗，但在点击第二个`div`时，Firefox不会触发弹窗而IE会。这是因为IE中`attachEvent`绑定的事件处理器在克隆节点...

    JS中使用DOM来控制HTML元素.docx

    在例子中，通过这两个属性可以获取到整个文档的宽度和高度，解决浏览器的兼容性问题。 4. **getElementById()**: 这个方法是根据元素的ID获取元素的常用方式。在上述removeNode()函数中，通过这个方法找到了id为...

    JS 动态增加table

    - `getMedalsGroup()` 函数：虽然在这个例子中没有详细实现，但看起来这个函数用于获取当前选中的奖牌设置的值，可能是为了进一步的业务逻辑处理。 综上所述，这个JSP页面通过JavaScript实现了动态添加表格行的...

    JavaScript王者归来part.1 总数2

    　1.6 一个例子--JavaScript编写的计算器　 　1.7 学习和使用JavaScript的几点建议　 　1.8 关于本书的其余部分　 　第2章 浏览器中的JavaScript 　2.1 嵌入网页的可执行内容　 　2.2 赏心悦目的特效　 　2.3 使用...

    javascript经验

    在这个例子中，我们设置了一个延时 3 秒后执行的函数，该函数会在控制台输出 "Hello after 3 seconds!"。 以上这些是 JavaScript 开发中常用的 DOM 操作方法和技术要点。掌握它们能够帮助开发者更高效地操作页面...

    华师_网络教育本科_web程序设计_作业[收集].pdf

    在给定的例子中，`20 &gt;&gt; 3`的结果是4（因为20的二进制表示是10100，右移三位后变成00010），然后`4 | 9`的结果是11，因为4的二进制是0100，9的二进制是1001，按位或后是1101，即十进制的13。 2. JavaScript异或运算...

    js设计模式之单例模式原理与用法详解

    在这个例子中，`Singleton`对象有一个内部函数`createInstance`用于创建实例，而`getInstance`方法检查`instance`是否存在，如果不存在，则调用`createInstance`并存储结果。这样每次调用`getInstance`时，无论调用...

    一个页面元素appendchild追加到另一个页面元素的问题

    在这个例子中，`#child`元素将从`#parent1`中移除，并被追加到`#parent2`中，结果是`#child`将不再出现在`#parent1`下面，而是出现在`#parent2`下面。原来的`#parent1`区域将会空出来，因为它的子元素`#child`已经被...

    原生JS无缝滑动轮播图

    在这个例子中，由于提供的代码没有涉及具体的淡入淡出实现，所以这部分需要自行补充。 8. **兼容性和优化**： 考虑到不同浏览器的兼容性，确保使用的JavaScript语法能在大部分浏览器中运行。另外，优化性能，如...

    纯JS实现可拖拽表单的简单实例

    在这个例子中，DOM操作包括创建新元素、修改元素属性、获取元素位置等。 3. **事件处理**： 实现拖拽功能需要对鼠标事件进行精确控制。涉及到的鼠标事件主要有： - mousedown：在用户按下鼠标按钮时触发。该事件...

    JavaScript Table行定位效果

    并在GetBgColor获取背景色程序中使用： while (bgc == this._transparent && (node = node.parentNode) != document) { bgc = CurrentStyle(node).backgroundColor; } return bgc == this._transparent ? "#fff" :...

    javascript学习笔记(十九) 节点的操作实现代码

    此方法接受两个参数：第一个是希望插入的新节点，第二个是参照节点。新节点将被插入到参照节点之前的位置，并且此方法也会返回新插入的节点。例如，将一个新创建的`li`元素添加到`ul`的第一个子节点前的代码如下： ...

    DOM的基本方法.txt

    在这个例子中，如果文档中存在`id`为`exampleId`的元素，则`element`变量将引用该元素；如果没有找到匹配的元素，则返回`null`。 --- ##### 2. `document.getElementsByTagName(tagName)` **功能**： 此方法返回...

    JS增加行复制行删除行的实现代码

    在这个例子中，当用户点击“复制”按钮时，`copyrow`或`copyrowUpdate`会被调用，根据需要进行行的复制和更新；点击“删除”按钮则调用`deleteRow`删除行。此外，还有一个“添加行”按钮，它调用`addRow`函数（在...

Magicbox
Global site tag (gtag.js) - Google Analytics