####传统方法

  • 使用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);
    }
}