# 动态创建标记
- <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` 方法
