創(chuàng)建元素

createElement()

createElement方法用來(lái)生成HTML元素節(jié)點(diǎn)。

var newDiv = document.createElement("div");

createElement方法的參數(shù)為元素的標(biāo)簽名，即元素節(jié)點(diǎn)的tagName屬性。如果傳入大寫的標(biāo)簽名，會(huì)被轉(zhuǎn)為小寫。如果參數(shù)帶有尖括號(hào)（即<和>）或者是null，會(huì)報(bào)錯(cuò)。

createTextNode()

createTextNode方法用來(lái)生成文本節(jié)點(diǎn)，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");

上面代碼新建一個(gè)div節(jié)點(diǎn)和一個(gè)文本節(jié)點(diǎn)

createDocumentFragment()

createDocumentFragment方法生成一個(gè)DocumentFragment對(duì)象。

var docFragment = document.createDocumentFragment();

DocumentFragment對(duì)象是一個(gè)存在于內(nèi)存的DOM片段，但是不屬于當(dāng)前文檔，常常用來(lái)生成較復(fù)雜的DOM結(jié)構(gòu)，然后插入當(dāng)前文檔。這樣做的好處在于，因?yàn)镈ocumentFragment不屬于當(dāng)前文檔，對(duì)它的任何改動(dòng)，都不會(huì)引發(fā)網(wǎng)頁(yè)的重新渲染，比直接修改當(dāng)前文檔的DOM有更好的性能表現(xiàn)。

修改元素

appendChild()

在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

insertBefore()

在某個(gè)元素之前插入元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

replaceChild()

replaceChild()接受兩個(gè)參數(shù)：要插入的元素和要替換的元素

newDiv.replaceChild(newElement, oldElement);

刪除元素

刪除元素使用removeChild()方法即可

parentNode.removeChild(childNode);

clone元素

cloneNode()方法用于克隆元素，方法有一個(gè)布爾值參數(shù)，傳入true的時(shí)候會(huì)深復(fù)制，也就是會(huì)復(fù)制元素及其子元素（IE還會(huì)復(fù)制其事件），false的時(shí)候只復(fù)制元素本身

node.cloneNode(true);

參考"饑人谷"