尽量避免HTML和javascript代码混在一起，要做到行为和结构分离。
=========================================================================
添加一个元素节点：
<div id="testDiv">
</div>
1.创建新的元素；
2.把这个新元素插入节点树；
document.createElement(nodeName);
用这条语句来创建一个新的P元素
document.createElement("p");
把新创建出来的元素赋给一个变量会比较方便使用
var para = document.createElement("p");
使用appendChild方法来使得新创建的元素成为已有元素的一个子节点
parent.appendChild(child)
首先获取到testDiv节点
var testdiv = document.getElementById("testDiv");
然后调用appendChild方法
testdiv.appendChild(pare);
=================================================================
上面只是创建了一个P节点，但是节点内并没有任何内容，下面为P节点创建文本节点
使用createTextNode方法来实现创建文本节点
document.createTextNode("text");
创建一个内容为“Hello world”的文本节点,并把它赋值给新的变量
var txt = document.createTextNode("Hello world");
使用para调用appendChild方法
para.appendChild(txt);
=====================================================================
把一个新元素插入到一个现有元素的前面
insertBefore()
//newElement 新元素：你想要插入的元素
//targetElement 目标元素：你想把新元素插入到那个元素之前
//parentElement 目标元素的父元素
parentElement.insertBefore(newElement, targetElement);
======================================================================
把一个新元素插入到一个现有元素的后面
insertAfter()方法，但是DOM没有提供这一方法。
function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;//获取目标元素的父元素
if(parent.lastChild == targetElement) {//判断父元素的最后一个子元素是否为目标元素
parent.appendChild(newElement);
}else {
parent.insertBefore(newElement, targetElement.nextSibling);//nextSibling下一个兄弟元素
}
}
=====================================================================
