元素节点的创建，添加，替换与删除。

发表于 | 分类于 |

节点的创建与添加

  1. createElement() 创建元素节点用此方法
    语法格式：document.createElement("tagName");
    例如：document.createElement("div"); 这样就创建了一个div元素，注意不需要写结尾和尖括号。
  2. createTextNode()，创建文本节点。
    语法格式：createTextNode("PHP学院");
  3. createDocumentFragment()，创建一个临时元素容器(也叫文档片段)
    语法格式：var box = document.createDocumentFragment()
    该方法返回一个元素容器，用于临时保存新创建的元素，以提高DOM操作的性能。
    以上是节点创建常用的方法，以下是添加创建的节点常用的方法
  4. appendChild(node)，将node节点添加父元素的末尾
  5. insertBefore(newNode,refNode)，在父元素的参考节点refNode之前插入newNode节点
  6. replaceChild(newNode,oldNode)，将childNodes中的oldNode节点替换成newNode
  7. removeChild(node)，从childNodes中删除node节点
    代码示例演示每个方法的使用情况
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    var oUl = document.getElementById("oUl");
    //创建元素节点的方法
    var newLi1 = document.createElement("li"); 
    //创建文本节点的方法
    var newLi1Txt = document.createTextNode("我是新创建的节点li1中的文本");
    //把文本节点添加到li中(就是把小的逐级向大的内部添加)
    newLi1.appendChild(newLi1Txt);
    //把完整的新li节点添加到UL中
    oUl.appendChild(newLi1);
    //上面代码创建的有个问题，li中的文本缺少a标记，改进如下
    var newLi2 = document.createElement("li"); 
    //创建A元素并设置其属性
    var newLi2A = document.createElement("a"); 
    	newLi2A.href="http://www.baidu.com";
    	newLi2A.target = "_blank";
    //创建文本节点
    var newLi2Txt = document.createTextNode("连接词");
    //逐级向上级元素的内部添加
    newLi2A.appendChild(newLi2Txt);
    newLi2.appendChild(newLi2A); 
    oUl.appendChild(newLi2);
    var fragment = document.createDocumentFragment();
    var li = null;
    for(var i=0;i<1000;i++){
    	li = document.createElement("li");
    	li.appendChild(document.createTextNode("通过Fragmeng片段可以减少渲染次数提高性能"));
    	 fragment.appendChild(li);
    	// oUl.appendChild(li); //理论上这一句比上一句效率低，但是实际情况是老浏览器基本是这样，新浏览器差不多。
    }
    oUl.appendChild(fragment);

提示：使用appendChild与createElement创建添加大量节点实战证明不是很高效。
一般使用innerHTML效率可以有N倍的提升。下一节，节点的替换和删除。 下下一节innerHTML。

节点的替换与删除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var oUl = document.getElementById("oUl");
//删除节点
oUl.removeChild(oUl.childNodes[0].nextSibling);	//原有的LI1，就被删除了
//替换节点
//创建一个新节点
var li = document.createElement("li");
var txt = document.createTextNode("我替换了另外一个节点");
li.appendChild(txt);
//用新节点替换旧节点
oUl.replaceChild(li,oUl.childNodes[2]);
//在特定节点前插入新节点
var h2 = document.createElement("h2");
var h2txt = document.createTextNode("我是H2中的内容");
	h2.appendChild(h2txt);
var box = 	document.getElementById("box");
var h1t = 	document.getElementById("h1t");
box.insertBefore(h2,h1t);