# 動態創建標記
- <a href="#no1">7.1 一些傳統方法</a>
- <a href="#no2">7.2 DOM方法</a>
- <a href="#no3">7.3 重回圖片庫</a>
- <a href="#no4">7.4 Ajax</a>
- <a href="#no5">7.5 小結</a>
**本章內容**
- 傳統技術：`document.write`和`innerHTML`。
- 深入剖析DOM方法：`createElement`、`createTextNode`、`appendChild`和`insertBefore`。
##<a name="no1">7.1 一些傳統方法</a>
###7.1.1 document.write
> `document`對象的`write()`方法可以方便快捷的把字符串插入到文檔里。
###7.1.2 innerHTML 屬性
> `innerHTML`屬性可以用來讀、寫某給定元素里的`HTML`內容。
##<a name="no2">7.2 DOM方法</a>
###7.2.1 ceartElement 方法
**創建元素**
document.createElement(nodeName)
###7.2.2 appendChild 方法
> 把節點插入某個文檔的節點樹。
parent.appendChild(child)
###7.2.3 createTextNode 方法
> 創建一個文本節點
document.createTextNode(text)
例：
window.onload = function(){
var para = document.createElement('p');
var txt = document.createTextNode('Hello world');
para.appendChild(txt);
var testdiv = document.getElementById('testdiv');
testdiv.appendChild(para);
}
###7.2.4 一個更復雜的組合
##<a name="no3">7.3 重回圖片庫</a>
###7.3.1 在已有元素前插入一個新元素
> DOM提供了名為 `insertBefore()`方法，這個方法將把一個元素插入到一個現有元素的前面。
parentElement.insertBefore(newElement, targetElement);
###7.3.2 在現有方法后插入一個新元素
> 既然有`insertBefore`方法，是不是也有一個對應的`insertAfter()`方法？很可惜，DOM沒有提供這個方法。不過咱們可以自己編寫一個。
**1.編寫 insertAfter函數**
function insertAfter(newElement, targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
這個函數用到了以下DOM方法和屬性：
- parentNode 屬性
- lastChild 屬性
- appendChild 方法
- insertBefore 方法
- nextSibling 屬性
#
1. 首先，這個函數有兩個參數：一個是將被插入的新元素，另一個是目標元素。這兩個參數通過變量 `newElement`和`targetElement`被傳遞到這個函數：`function insertAfter(newElement, targetElement)`
2. 把目標元素的`parentNode`屬性值保存到變量`parent`里：`var parent = targetElement.parentNode`
3. 檢查目標元素是否為`parent`的最后一個子元素。`if(parent.lastChild == targetElement)`
4. 如果是，就用`appendChild`方法把新元素追加到`parent`元素上。`parent.appendChild(newElement);`
5. 如果不是，就把新元素插入到目標元素和目標元素的下一個兄弟元素之間。目標元素的下一個兄弟元素即目標元素的`nextSibling`屬性。用`insterBefore`方法把新元素插入到目標元素的下一個兄弟元素之前：`parent.insertBefore(newElement, targetElement.nextSibling);`
**2.使用insertAfter函數**
> 略
###7.3.3 圖片庫二次改進版
> 略
##<a name="no4">7.4 Ajax</a>
> 略
###7.4.1 XMLHttpRequest 對象
###7.4.2 漸進增強與 Ajax
###7.4.3 Hijax
##<a name="no5">7.5 小結</a>
- `document.write` 方法
- `innerHTML` 屬性
- `createElement` 方法
- `createTextNode` 方法
- `appendChild` 方法
- `insterBefore` 方法
