創建文本節點 document.createTextNode() 創建新文本節點，該方法接收一個參數，即要插入節點中的文本信息。 文本節點的合併 當往一個節點中添加多個文本節點後，要取出該節點的全部節點內容，第一個想到的方法是用for迴圈拼接。 Node類型里定義了一個normalize() 方法， ...
- 創建文本節點
document.createTextNode() 創建新文本節點，該方法接收一個參數，即要插入節點中的文本信息。
1 <script> 2 //創建一個div節點 3 var element = document.createElement('div'); 4 //創建一個文本節點 5 var textNode = document.createTextNode("hello"); 6 //將文本節點添加到div節點中 7 element.appendChild(textNode); 8 //將div節點添加到文檔中 9 document.body.appendChild(element); 10 </script>
- 文本節點的合併
當往一個節點中添加多個文本節點後，要取出該節點的全部節點內容，第一個想到的方法是用for迴圈拼接。
1 var p2=document.getElementById('p2'); 2 var node1 = document.createTextNode('al!'); 3 p2.appendChild(node1);//添加一個文本節點 4 var node2 = document.createTextNode('a2!'); 5 p2.appendChild(node2);//又添加一個文本節點 6 var len = p2.childNodes.length; 7 var str =""; 8 //for迴圈，拼接所有文本節點 9 for(var i=0;i<len;i++){ 10 str += p2.childNodes[i].nodeValue; 11 } 12 alert(str);
Node類型里定義了一個normalize() 方法，會將一個節點中的所有文本節點合併成一個文本節點。
1 <script> 2 var p2=document.getElementById('p2'); 3 var node1 = document.createTextNode('al!'); 4 p2.appendChild(node1); 5 var node2 = document.createTextNode('a2!'); 6 p2.appendChild(node2); 7 var num = p2.childNodes.length; 8 p2.normalize(); //使用文本節點合併方法 9 alert(p2.childNodes[0].nodeValue);//合併後只有一個節點，直接輸出即可 10 </script>
- 文本節點的拆分
splitText() 方法，接收一個參數，即要拆分的位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function(){ var p1 = document.getElementById('p1'); var newNode = p1.childNodes[0].splitText(5); //newNode的值為abcde alert(p1.childNodes.length);//2個文本節點 var p2 = document.getElementById('p2'); p2.appendChild(newNode); //該方法會把拆分的前一部分(這裡為’abcde‘)當做一個文本節點返回。 } </script> </head> <body> <div> <p id='p1'>abcdefghijk</p> <p id='p2'></p> </div> </body> </html>
- DocumentFragment 類型
文檔片段，可以想象成一個背包，把多個節點先放進包里，然後一下子拿出來。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload=function(){ 8 var fragment = document.createDocumentFragment(); 9 var time = new Date; 10 var old = time.getTime(); 11 var ul = document.getElementById('ul1'); 12 for(var i=0;i<5;i++){ 13 var li = document.createElement('li');
li.appendChild(document.createTextNode('item'+i)); 14 15 //這樣寫的話就是有一個li，就往ul里添加一個 16 //ul.appendChild(li); 17 18 //這樣寫就是先把li 存在文檔片段中，迴圈結束，再加到ul中 19 fragment.appendChild(li); 20 } 21 ul.appendChild(fragment); //背包里（代碼片段）的li一下子加入到ul中 好處是避免瀏覽器反覆渲染新信息 22 } 23 24 </script> 25 </head> 26 <body> 27 <ul id = 'ul1'></ul> 28 </body> 29 </html>
