####传统方法

• 使用innerHTML

####DOM方法

• 假设有以下代码

    <div id="testdiv">
    </div>

1. createElement方法

document.createElement("p")

2. appendChild方法

parent.appendChild(child);

• 在testdiv下添加一个新的元素

var para = document.createElement("p");
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);

• 或者使用这个风骚的写法

document.getElementById("testdiv").appendChild(document.createElement("p"));

3. createTextNode方法

• 用于创建文本节点

document.createTextNode(text)

• 和上面的例子结合起来

window.onload = function() {
    var testdiv = document.getElementById("testdiv");
    var para = document.createElement("p");
    var txt = document.createTextNode("Hello World!");      
    para.appendChild(txt);
    testdiv.appendChild(para);
}

• 顺序什么的可以适当的调整

window.onload = function() {
    var para = document.createElement("p");
    var testdiv = document.getElementById("testdiv");
    testdiv.appendChild(para);
    var txt = document.createTextNode("Hello World!");      
    para.appendChild(txt);
}

4. insertBefor方法

• 把一个新元素插入到一个现有元素之前

parentElement.insertBefore(newElement, targetElement)

举个例子

var gallery = document.getElementById("imagegallery");
gallery.parentNode.insertBefore(placeholder, gallery);

5. 自己实现insertAfter方法

function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}