节点操作 

 一、新建节点的相关操作


 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>

 

 

 

 

posted @ 2013-09-12 11:30  最是那一杯红酒  阅读(419)  评论(0)    收藏  举报