动态创建标记：
传统方法：document.write、innerHTML
document.write ： 方法可以方便快捷地把字符串插入到文档里，但是缺点是违背了“行为应该与表现分离”的原则。即使把document.write语句挪到外部函数里，也还是需要在标记的<body>部分使用<script>标签才能调用那个函数。应该避免在<body>部分乱用<script>标签，避免使用document.write方法。
innerHTML：用来读、写某给定元素里的HTML内容。
<div id="text"> <p>This is <em>my</em>content.</p> </div>
元素节点
| div |
| <p>This is <em>my</em>content.</p> |
HTML
就innerHTML属性来看，id为text的标记里面只有一个值为<p>This is <em>my</em>content.</p>的HTML字符串。
innerHTML属性是HTML专有属性，不能用于任何其他标记语言文档。
DOM方法：createElement、appendChild、createTextNode
createElement ：创建一个元素节点 ，语法：document.createElement（nodeName） eg：document.createElement（"p");创建一个p元素。
appendChild ：插入节点， 语法：parent.appendChild(child)
createTextNode :创建文本节点 ，语法：document.createTextNode(text) eg:document.createTextNode("Hello world!");就会创建一个内容为”Hello World“的文本节点 。
insertBefore ：将一个新元素插入到一个现有元素的前面 ， 在调用这个方法时，必须得知三件事：1、新元素：你想插入的元素（newElement） 2、目标元素：想把这个新元素插入到哪个元素（targetElement）之前 3、父元素：目标元素的父元素（parentElement） 语法：patentElement.insertBefore（newElement，targetElement） 我们不必搞清楚父元素到底是哪个，因为targetElement元素的parentNode属性值就是它。 属性节点和文本节点的子元素不允许是元素节点
在现有元素后插入一个新元素：DOM中没有这个方法，但是我们可以写出这个函数
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if(parent.lastChild==targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
nextSibling:相同层的下一个节点，即下一个兄弟节点