js中cloneNode

最新推荐文章于 2024-05-30 00:30:00 发布
最新推荐文章于 2024-05-30 00:30:00 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： js 文章标签： input button function string path html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java20100406/article/details/6703618
版权
 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<STRONG><%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%></STRONG>
<html>
<head>
<script type="text/javascript">
 <STRONG>function add(){      //添加子接口
      var newSub = document.all.templete.cloneNode(true);
      newSub.id = '';
      newSub.style.display = "block";
    //var elements = newSub.getElementsByTagName("INPUT");
      //for(var i=0; i<elements.length; i++){
          //elements[i].name =  elements[i].name.replace(/\[\d*\]/, '['+index+']');
      //}
   alert("子接口个数:"+document.all.subs.childNodes.length);
      document.all.subs.appendChild(newSub);
 }
 function remove(delLink){
     document.all.subs.removeChild(delLink.parentNode.parentNode);
 }</STRONG>
</script>
</head>
<body>
<STRONG><%= path %>
<%= basePath %></STRONG>
<br>
<STRONG>cloneNode()方法可创建指定节点的精确拷贝,(可以做一个模版 然后做一个隐藏域,点击按钮就添加一个模板),此方法可返回所复制的节点.
该方法将复制并返回调用它的节点的副本.如果传递给它的参数是 true,它还将递归复制当前节点的所有子孙节点.否则,它只复制当前节点.
返回的节点不属于文档树,它的 parentNode 属性为 null.
当复制的是 Element 节点时,它的所有属性都将被复制.但要注意,当前节点上注册的事件监听器函数不会被复制.</STRONG>

<input type="button" value="添加子接口" onClick="add()"/>
<STRONG><div id="subs">
<%-- 子接口层 --%>
</div>

<%-- 子接口 HTML模板 开始 --%>
<div id="templete" style="display:none;">
 <div>子接口信息&nbsp;
  <a href="#" οnclick="remove(this)"  style="font-size:12px;">删除</a>
 </div>
 <table>
  <tr>
    <td><input type="text" name="name"/></td>
  </tr>
 </table>
</div></STRONG>
<STRONG><%-- 子接口 HTML模板 结束 --%></STRONG>
************************************************************<br>
 <STRONG><SPAN style="COLOR: #ff00ff"><table id="show" border="1">
   <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></SPAN></STRONG>
 <input type="button" value="添加一人" οnclick="addhang()"/>

<script type="text/javascript">
 <STRONG><SPAN style="COLOR: #ff00ff">i=1;
 function addhang() {
     var tableObject=new Object();
     tableObject=document.getElementById("show"); 
     var isneed=true; 
     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();
       alert(td0.innerHTML);
       alert(newTR.innerHTML);
       alert(tableObject.innerHTML);
      
       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" οnchange="addhang()"/>';  
     }
  }</SPAN></STRONG> 
</script>
</body>
</html>

 

js中cloneNode()和removeChild()实现添加和删除文件上传域
天道酬勤
08-10 3476
我想实现的效果是：在多个上传文件时，单击添加何以增加一个文件上传域，单击删除可以删除一个文件上传域。用js实现的代码：                           function insertRow(){                         var rowindex = document.all("addordel").length;
JavaScript 用cloneNode方法克隆节点的代码
10-27
然后，在JavaScript文件（例如test.js）中，我们可以在页面加载完成后使用cloneNode方法克隆这个节点： ```javascript window.onload = function() { var sourceNode = document.getElementById("div-0"); // 获取...
js中cloneNode()的使用 （Blog合并）
hejianhuacn的专栏
12-04 261
在web页面中经常需要出现许多完全一样的控件项，而需要控件的多少完全由用户输入量决定，在js中可以很容易的实现这点，效果展示大多时候比语言来得更有魅力。 [code] 控件cloneNode（）方法的使用 i=1; function AddRow() { var tableObject=new Object(); var isneed=...
JS中关于cloneNode方法
iteye_20446的博客
10-25 544
这几天做了个比较大的课题，到此为止，现在算是完成了，大概也忙活了一个礼拜的时间，基本上就是看着身边同事都在玩，我一个人忙的不可开交，偶尔加加班，也完成了！前前后后也查了不少资料！正因为大家都不会，他们就叫我来处理这个！没办法，只能挑起大梁，好了，废话不多说，进入今天的正题： 在新做的这个课题上很大部分都是js写的多！于是乎在做到这个动态添加table的一行，使用了[code="js"]clone...
js中cloneNode()的使用 两个例子
08-20 290
js中cloneNode()的使用
hejianhuacn的专栏
04-24 3209
在web页面中经常需要出现许多完全一样的控件项，而需要控件的多少完全由用户输入量决定，在js中可以很容易的实现这点，效果展示大多时候比语言来得更有魅力。 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
javascript cloneNode()方法的使用
10-29
javascript 中的 cloneNode() 方法是用来克隆一个元素的，包括其所有子元素和属性。该方法返回克隆的元素，并且可以选择是否克隆元素的所有子元素。 在上面的实例代码中，我们使用了 cloneNode() 方法来克隆一个 ...
javascript 拷贝节点cloneNode()使用介绍.docx
01-13
在JavaScript中，`cloneNode()`方法是DOM（Document Object Model）操作中的一个重要功能，主要用于复制（克隆）DOM树中的节点及其属性。这对于创建复杂的用户界面或者动态调整页面内容时非常有用。 #### 一、...
[js] cloneNode
qq_14993591的博客
09-07 179
<h1> <div class="div1" id="div2" name="div3"> 我是div标签 <p>我是p标签</p> <span>我是span标签</span> </div> </h1> <h2> </h2> var oDiv =...
javascript 拷贝节点cloneNode()使用介绍
01-19
cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没有父节点.除非使用appendChild,insertChild(),replaceChild()将它添加到文档 代码如下: <div id=”guoDiv”> <span>1</span> <span>2</span> <span>3</span> </div> var oDiv = document.getElementById(“guoDiv”); var deepList = oDiv.
Js ——CloneNode()用法
热门推荐
进击的葱
12-26 2万+
描述： cloneNode() 方法可创建指定的节点的精确拷贝。 cloneNode() 方法 拷贝所有属性和值。 该方法将复制并返回调用它的节点的副本。 如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。 否则（也就是默认值，或者false），它只复制当前节点。 案例： 代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt...
javascript当中如何操纵Node，（创建，附加，克隆，取代，去除，插入Node）
mark_to_win的专栏
03-21 267
1.操纵Node，（创建，附加，克隆，取代，去除，插入Node）例 1.1（cloneNode()IEFF.html）<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><SCRIPT LANGUAGE="JavaScript"><!--window...
JavaScript 用 cloneNode 方法克隆节点
weixin_33939380的博客
10-02 1146
为什么80%的码农都做不了架构师？>>> ...
javascript当中cloneNode的用法
qq_43650923的博客
10-30 647
例 1.1（cloneNode()IEFF.html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- window.onload=function(){ var pa...
javascript cloneNode()方法
like sunny,like rain
10-21 872
该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。  返回的节点不属于文档树，它的 parentNode 属性为 null。  当复制的是 Element 节点时，它的所有属性都将被复制。但要注意，当前节点上注册的事件监听器函数不会被复制。
js dom 方法 js中cloneNode()的使用（复制元素）
龙卷风之家
01-08 7406
js dom 方法 js中cloneNode()的使用（复制元素）   document方法：   getElementById(id)  Node  返回指定结点的引用   getElementsByTagName(name)  NodeList  返回文档中所有匹配的元素的集合   createElement(name)  Node  Node   creat
Javascript 节点克隆详解
最新发布
大剑师兰特的GIS世界
05-30 988
在JavaScript中，`Node.cloneNode()`方法用于克隆一个节点。克隆可以是浅克隆（只复制节点本身，不包括其子节点）或者是深克隆（复制节点及其所有后代节点）。默认情况下，该方法执行的是浅克隆。
js中的cloneNode有什么作业
05-05
JavaScript中的`cloneNode()`方法是用于复制一个节点的副本并返回该副本的方法。它的作用主要有以下几个方面： 1. 在DOM中复制一个节点及其所有的子节点，而不改变原始节点的结构和属性。 2. 克隆的节点可以在文档中重新插入，从而实现复制和粘贴的功能。 3. 可以修改克隆节点的属性和内容，而不会影响原始节点。 4. 可以在不影响原始节点的情况下，动态地生成新的节点。 需要注意的是，`cloneNode()`方法只复制指定的节点，而不会复制与之相关的事件处理程序和数据。如果需要复制事件处理程序和数据，可以使用其他方法或库来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值