文本克隆函数cloneNode他有两个参数——true or false
true:完全的复制一个节点,什么叫完全呢,就是复制一切,包括他的子节点,以至于文本节点,凡是有的,一律克隆,所谓完全
false:只克隆当前节点,不克隆任何的子节点,当然也不会克隆他所包裹的文本,因为任何文本都有指向他的节点(文本节点)
当然有时候两者是可以通用的哦,如果要复制的节点没有任何的子节点,这是二者全等;
例子代码:
<!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=gb2312" /> <title>控件cloneNode()方法的使用</title> <script language="javascript"> i=1; function AddRow() { var tableObject=new Object(); var isneed=true; tableObject=document.getElementById("CloneNodeShow"); //判断是否有必要添加新的输入行 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(); var td4=newTR.insertCell(); td0.innerHTML=(++i)+'.'; td1.innerHTML='<input type="text" name="username"/>'; //true表示深度克隆 var newSelect=document.getElementById("sexType").cloneNode(true); newSelect.id="sexType"+i; td2.appendChild(newSelect); td3.innerHTML='<input type="text" name="age"/>'; td4.innerHTML='<input type="button" value="新增" onclick="AddRow()" title="全部填写完成后,请单击这里"/>'; } } </script> </head> <body> <form> <table id="CloneNodeShow" border="2" bordercolor="#000000"> <tr><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr> <tr id="signTR" > <td>1.</td> <td><input type="text" name="username"/></td> <td> <select name="sexType" id="sexType" onchange="AddRow()"> <option value="%">请选择性别</option> <option value="0">男</option> <option value="1">女</option> </select> </td> <td><input type="text" name="age" onchange="AddRow()"/></td> <td><input type="button" value="新增" onclick="AddRow()" title="全部填写完成后,请单击这里"/></td> </tr> </table> <hr> <div> <span>Shadow</span> <input type="button" value="效果1" onclick="fn1()" title="cloneNode()参数true和false的区别"/> <input type="button" value="效果2" onclick="fn2()" title="cloneNode()参数true和false的区别"/> </div> <script language="javascript"> var element = document.getElementsByTagName('span')[0]; function fn1() { var t1 = element.cloneNode(false).innerHTML;//不复制子节点 var t2 = element.cloneNode(true).innerHTML;//copy all alert(t1); alert(t2); } function fn2() { var textnode = element.firstChild;//指向文本节点 var t1 = textnode.cloneNode(false).nodeValue; var t2 = textnode.cloneNode(true).nodeValue; alert(t1); alert(t2); } </script> </form> </body> </html>
例子二来源于网上
<html> <head> <script type="text/javascript"> var idCounter = 1; function fnClone() { var oRow = document.getElementById("row1").cloneNode(true); document.getElementById("oTable").childNodes[0].appendChild(oRow); oRow.id = "row" + (++idCounter); } function fnget(){ var bb=document.getElementsByName("texta") for(var i=0;i <bb.length;i++){ alert(bb[i].value) } } </script> </head> <body> <table border="1" id="oTable"> <tr id="row1"> <td> Text </td> <td> <input type="text" value="textbox" name="texta"/> </td> <td> <input type="button" value="click me get text value" onclick="alert(this.parentNode.parentNode.childNodes[1].childNodes[0].value)"/> </td> </tr> </table> <input type="button" value="Clone" onclick="fnClone()" /> </br> <input type="button" value="get text Value" onclick="fnget()" /> </body> </html>