- 创建文本节点
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>