动态创建标记
一，传统方式
1，document.write方法
该方式是快捷的把字符串插入到文档里
<body>
<script>
document.write("<p>this is document.write</p>");
</script>
</body>
该方式的最大的缺点是它违背了“行为与表现分离”的原则，即使把该语句转移到外部函数，但也需要在body部分使用script标签才能调用哪个外部函数
2，innerHTML属性
该属性包含于HTML5规范里，该属性可以用于读、写某个给定元素里的HTML内容
<html>
<head>
<script>
//向目标div添加内容的匿名函数
window.onload = function(){
var testdiv = document.getElementById("testdiv");
testdiv.innerHTML = "<p>this is innerHTML</p>";
}
</script>
</head>
<body>
<div id="testdiv"></div>//待添加内容的div
</body>
</html>
该方式在文档创建的内容基本是整体的，无法处理过于细节的操作，但比document.write()方式相比较下优雅一些
二，DOM方式
1，createElement方法
该方法用于创建新的元素节点
语法：
document.createElement(nodeName);
2，appendChild方法
该方法用于将新创建的节点插入目标节点中
语法：
parent.appendChild(child);
3，createTextNode方法
该方法用于创建一个文本结点，其方法参数为要插入的文本字符串
语法：
document.createTextNode(text);
示例：
<html>
<head>
<script>
window.onload = function(){
var para = document.createElement("p");//创建p元素节点
var testdiv = document.getElementById("testdiv");//获取文档的div的id
testdiv.appendChild(para);//将p元素节点插入div中，即p是div的子元素
var txt = document.createTestNode("this is a Deom");//创建文本节点
para.appendChild(txt);//将文本节点插入p元素中
}
</script>
</head>
<body>
<div id="testdiv"></div>
</body>
</html>
4，insertBefore()方法
该方法用于将新元素插入到目标元素的之前
语法：
parentElement.insertBefore(newElement,targetElement);
实质上parentElement的值就是targetElement元素的parentNode属性值