在文檔中創建和插入新元素

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

在div裏插入新元素，

方法一：

window.onload=function () {
    var testdiv=document.getElementById("testdiv");
    testdiv.innerHTML="<p> This is <em> my </em> content.</p>";
}

方法二：

window.onload=function () {
    var para=document.createElement("p");//創建元素節點
    var txt1=document.createTextNode("This is");//創建文本節點
    para.appendChild(txt1);//讓txt1成爲para的子節點
    var em=document.createElement("em");
    var txt2=document.createTextNode(" my ");
    em.appendChild(txt2);
    para.appendChild(em);
    var txt3=document.createTextNode("content.");
    para.appendChild(txt3);
    var testdiv=document.getElementById("testdiv");
    testdiv.appendChild(para);
}

在已有元素前插入一個新元素：

parentElement.insertBefore(newElement,targetElement);

//新元素:想插入的元素(newElement);目標元素:新元素插入到哪個元素(targetElement)之前;父元素:目標元素的父元素(parentElement)。

在現有元素之後插入一個新元素：

function insertAfter(newElement,targetElement){
    var parent=targetElement.parentNode;
    if(parent.lastChild==targetElement){  
        parent.appendChild(newElement);
    }else {
        parent.insertBefore(newElement,targetElement.nextElementSibling);//將新元素查到目標元素的兄弟元素前面
    }
}