从一个示例延展到DOM典型操作

示例

把<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)