示例
把<ul><li>第1行</li><li>第2行</li>...</ul>（ul之間有10個li元素）插入body里面
程序
var lis = ''
var ul = document.createElement("ul") //創建元素
for(var i = 1; i <= 10; i++) {
lis += "<li>第" + i + "行</li>"
}
ul.innerHTML = lis //動態改變文本
document.body.appendChild(ul) //添加元素到文檔樹
典型操作：
1.創建元素document.createElement()
a. document.createElement(標簽名)
var div = document.createElement('div')
div.id = 'myNewDiv'
div.className = 'box'
b. document,createElement(完整的HTML標簽) 僅IE中可用
document.createElement("<div id = \"myNewDiv\" class = \"box\"></div>")
2.innerHTML、outerHTML、innerText、outerText IE專有
3.添加元素到文檔樹
a.someNodes.appendChild(node) --- 向childNodes列表的末尾添加節點node
// 若node不屬于文檔，則執行添加
var rnode = someNodes.appendChild(node)
console.log(rnode === node) //true
console.log(someNodes.lastChild === node) //true
//若node屬于文檔一部分，則將該節點從原來位置移至末尾
var rnode = someNodes.appendChild(someNodes.firstChild)
console.log(rnode === someNodes.firstChild) //false
console.log(rnode ===someNodes.lastChild) //true
```
b. someNodes.insertBefore(node,nextNode) --- 向childNodes列表中nextNode所在位置添加節點node,nextNode后移一位
```js
//nextNode = null
var rnode = someNodes.insertBefore(node,null)
console.log(node ===someNodes.lastChild) //true
//nextNode為有效參考節點
var rnode = someNodes.insertBefore(node,someNodes.lastChild)
console.log(node === someNode.childNodes[someNodes.childNodes.length-2]) //true
c.someNodes.replaceChild(node,replaceNode) --- 使用node代替childNodes列表中的replaceNode
//替換第一個節點
var rnode = someNodes.repace(node,someNodes.firstChild)
