尽量避免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下一个兄弟元素
  }
}

=====================================================================