DOM方法动态创建标记

一.一些传统方法
1.document.write
document对象的write()方法可以方便快捷的把字符串插入到文档里。

<script>
    document.write("<p>This is inserted.</p>");
</script>

document.write的最大缺点是它违背了“行为应该与表现分离”的原则。把结构、行为和样式分开永远都是一个好主意。
2.innerHTML属性
利用innerHTML读取：

window.onload=function(){
    var testdiv=document.getElementById("testdiv");
    alert(testdiv.innerHTML);
}

利用innerHTML插入或替换：

window.onload=function(){
    var testdiv=document.getElementById("testdiv");
    testdiv.innerHTML="<p>I inserted <em>this</em> content.</p>"  //全部内容将被替换
}

二.DOM方法
DOM是文档的表示，DOM所包含的信息与文档里的信息一一对应。在浏览器看来，DOM节点树才是文档。
1.createElement方法

document.createElement(nodeName)   //创建一个新的元素

例：

document.createElement("p");
var para=document.createElement("p");   //此时p元素还是一个文档碎片，它还不是任一棵DOM节点树的组成部分

2.appendChild方法

parent.appendChild(child)   //将创建的元素插入节点

例：

var para=document.createElement("p");  //要插入的节点
var testdiv=document.getElementById("testdiv");  //要被插入的节点
testdiv.appendChild(para);

3.createTextNode方法

document.createTextNode(text)     //创建一个文本节点

例：

var para=document.createElement("p");   //创建一个p节点
var txt=document.createTextNode("Hello world");   //创建一个文本节点
para.appendChild(txt);  //将文本节点追加到p节点上

4.一个更复杂的组合
例：将下述HTML内容插入html文档

<p>This is <em>my</em> content.</p>

window.onload=function(){
    var para=document.createElement("p");   //创建一个p节点赋给变量para
    var txt1=document.createTextNode("This is ");  //创建一个文本节点赋给变量txt1
    para.appendChild(txt1);   //将txt1追加到para上
    var emphasis=document.createElement("em");  //创建一个em节点赋给变量emphasis
    var txt2=document.createTextNode("my");  //创建一个文本节点赋给变量txt2
    emphasis.appendChild(txt2);  //把txt2追加到emphasis上
    para.appendChild(emphasis);  //把emphasis追加到para上
    var txt3=document.createTextNode("content.");  //创建一个文本节点赋给变量txt3
    para.appendChild(txt3);  //把txt3追加到para上
    var testdiv=document.getElementById("testdiv");  //找到id为testdiv的节点插入新节点
    testdiv.appendChild(para);  //把para追加到testdiv元素上
}

三.其它的创建方法
1.在已有元素前插入一个新元素
（1）新元素：你想插入的元素（newElement）。
（2）目标元素：你想把这个元素插入到哪个元素（targetElement）之前。
（3）父元素：目标元素的父元素（parentElement）。
调用语法：

parentElement.insertBefore(newElement,targetElement);

2.在现有元素后插入一个新元素
虽然DOM本身没有提供insertAfter方法，但我们完全可以利用已有的DOM方法和属性编写一个insertAfter函数：

function insertAfter(newElement,targetElement){
    var parent=targetElement.parentNode;
    if(parent.lastChild==targetElement){  //检查目标元素是否是parent最后一个子元素
        parent.appendChild(newElement);  //若是，将新元素追加到parent元素上
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling); //若不是，将新元素插入到目标元素的下一个兄弟元素之前
    }
}