节点操作
一、新建节点的相关操作
1 /*创建新节点通过使用文档对象的createElement()方法和createTextNode()方法，生成一个新的元素，
并生成文本节点再通过appendChild()方法将新创建的节点添加到当前节点的末尾处。 2 * 创建新的节点 3 */ 4 function createChild(){ 5 var b = document.createElement("b"); //创建新生成的节点元素 6 var txt = document.createTextNode("创建新的节点!"); //创建节点文本 7 //将新节点b添加到页面上 8 b.appendChild(txt); 9 document.body.appendChild(b); 10 } 11 12 /* 13 * 创建多个节点 14 */ 15 function dc(){ 16 var aText = ["第一个节点","第二个节点","第三个节点","第四个节点","第五个节点","第六个节点"]; 17 for(var i=0;i<aText.length;i++){ 18 var ce = document.createElement("p"); //创建新生成的节点元素 19 var cText = document.createTextNode(aText[i]); //创建节点文本 20 //将新节点b添加到页面上 21 ce.appendChild(cText); 22 document.body.appendChild(ce); 23 } 24 } 25 } 26 27 /* 28 * 创建多个节点2 29 */ 30 function oc(){ 31 var aText = ["第一个节点","第二个节点","第三个节点","第四个节点","第五个节点","第六个节点"]; 32 var cdf=document.createDocumentFragment(); 33 for(var i = 0;i<aText.length;i++){ 34 var ce = document.createElement("b"); 35 var be = document.createElement("b"); 36 var cText = document.createTextNode(aText[i]); 37 ce.appendChild(cText); 38 cdf.appendChild(ce); 39 cdf.appendChild(cb); 40 } 41 documnet.body.appendChild(cdf); 42 }
此方法只需刷频一次，效率更高
二、插入节点的相关操作
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>插入节点</title> 6 <script language="javascript"> 7 <!-- 8 function crNode(str) 9 { 10 var newP=document.createElement("p"); 11 var newTxt=document.createTextNode(str); 12 newP.appendChild(newTxt); 13 return newP; 14 } 15 16 function insetNode(nodeId,str) 17 { 18 var node=document.getElementById(nodeId); 19 var newNode=crNode(str); 20 if(node.parentNode) //判断是否拥有父节点 21 node.parentNode.insertBefore(newNode,node); 22 } 23 --> 24 </script> 25 </head> 26 <body> 27 <h2 id="h">在上面插入节点</h2> 28 <form id="frm" name="frm"> 29 输入文本：<input type="text" name="txt" /> 30 <input type="button" value="前插入" onclick="insetNode('h',document.frm.txt.value);" /> 31 </form> 32 </body> 33 </html>
三、复制节点的相关操作
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>复制节点</title> 5 <script language="javascript" charset = "gb2312"> 6 <!-- 7 8 /* 9 *使用cloneNode()方法实现复制节点 10 *语法：obj.cloneNode(deep) 11 *deep:该参数是一个boolean的值，表示是否为深度复制 12 *深度复制是将当前节点的所有子节点全部复制 13 *当为true时深度复制，为false时简单复制 14 *简单复制只复制当前节点，不复制其子节点 15 */ 16 function AddRow(bl) 17 { 18 var sel=document.getElementById("sexType"); 19 var newSelect=sel.cloneNode(bl); 20 var b=document.createElement("br"); 21 di.appendChild(newSelect); 22 di.appendChild(b); 23 } 24 --> 25 </script> 26 </head> 27 <body> 28 <form> 29 <hr> 30 <select name="sexType" id="sexType"> 31 <option value="%">请选择性别</option> 32 <option value="0">男</option> 33 <option value="1">女</option> 34 </select> 35 <hr> 36 <div id="di"></div> 37 <input type="button" value="复制" onClick="AddRow(false)"/> 38 <input type="button" value="深度复制" onClick="AddRow(true)"/> 39 </form> 40 </body> 41 </html>
四、删除节点的相关操作
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>删除节点</title> 6 <script language="javascript"> 7 <!-- 8 function delNode() 9 { 10 var deleteN=document.getElementById('di'); 11 if(deleteN.hasChildNodes()) 12 { 13 deleteN.removeChild(deleteN.lastChild); 14 } 15 } 16 --> 17 </script> 18 </head> 19 <body> 20 <h1>删除和替换节点</h1> 21 <div id="di"> 22 <p>第一行文本</p> 23 <p>第二行文本</p> 24 <p>第三行文本</p> 25 </div> 26 <form> 27 <input type="button" value="删除" onclick="delNode();" /> 28 </form> 29 </body> 30 </html>
五、替换节点的相关操作
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>替换节点</title> 6 <script language="javascript"> 7 <!-- 8 function repN(str,bj) 9 { 10 var rep=document.getElementById('b1'); 11 if(rep) 12 { 13 var newNode=document.createElement(bj); 14 newNode.id="b1"; 15 var newText=document.createTextNode(str); 16 newNode.appendChild(newText); 17 rep.parentNode.replaceChild(newNode,rep); 18 } 19 } 20 --> 21 </script> 22 </head> 23 <body> 24 <b id="b1">可以替换文本内容</b> 25 <br /> 26 输入标记：<input id="bj" type="text" size="15" /><br /> 27 输入文本：<input id="txt" type="text" size="15" /><br /> 28 <input type="button" value="替换" onclick="repN(txt.value,bj.value)" /> 29 </body> 30 </html>
