一.创建DOM元素
createElement：document.createElement(' 所要创建的元素标签名')；
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<input id="txt" type="text"></input> /*创建input文字编写内容*/
<input id="btn" type="button" value="获取"></input> /*按钮获取*/
<ul id="ul1">
</ul>
<script type="text/javascript">
window.onload=function () {
var oBtn=document.getElementById('btn');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt');
oBtn.onclick=function()
{
var aLi=document.createElement('li'); /*创建li元素*/
var oLi=oUl.getElementsByTagName('li'); /*需要知道往谁前面插，把ul中所有的li都选出来*/
aLi.innerHTML=oTxt.value; /*将input中的文字添加到li中*/
if (oLi.length>0) { /*兼容性考虑，若ul中本没有li，IE会出错，若本没有li，则先给其添加一个li （appendChild）*/
oUl.insertBefore(aLi,oLi[0]); /*将新li插入到数组首元素之前，改变顺序，先加入的元素在前出现*/
}
else
{
oUl.appendChild(aLi); /*添加到oUl的子节点下*/
}
}
}
</script>
</body>
</html>
知识点：document.creatChild('标签名')
元素添加到末尾：父级.appendChild（子节点）
插入元素：父级.insertBefore（子节点，在谁之前）
用if...else判断父级开始是否有元素存在来消灭兼容
只创建（creatChild）不添加（appendChild）是看不到效果的，只创建是创建到内存空间中去，添加到父级元素上才有效。
二.删除DOM元素
父级.remove(子节点)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<ul id="ul1">
<li>kebgkejgb<a href="#">删除</a></li>
<li>o84ythou<a href="#">删除</a></li>
<li>565eg<a href="#">删除</a></li>
<li>ohinci<a href="#">删除</a></li>
</ul>
<script type="text/javascript">
window.onload=function () {
var oA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1')
for (var i = 0; i < oA.length; i++) {
oA[i].onclick=function()
{
//删除this.parent
oUl.removeChild(this.parentNode);
}
}
}
</script>
</body>
</html>
知识点：删除的是<a>的父节点，删除后<li>直接消除，不是隐藏
三.文档碎片
可以提高DOM操作性能（理论上）（几乎看不到）
createDocumentFragment 创建文档碎片
提高插入DOM元素的性能。