创建、插入和删除元素
创建DOM元素
creatElement('标签元素')
父级.appendChild(子节点)//添加到父级末尾
插入元素
父级.insertBefore(子节点，在谁之前)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var oUl=document.getElementById('ul1');
var oBtn=document.getElementById('btn');
var oTxt=document.getElementById('txt1');
var Li=document.getElementsByTagName('li');
oBtn.onclick=function(){
var oLi=document.createElement('li');
oLi.innerHTML=oTxt.value;
if(Li.length>0)
{
oUl.insertBefore(oLi,Li[0]);
}
else
{
oUl.appendChild(oLi);
}
};
};
</script>
</head>
<body>
<input id="txt1" type="text">
<input id="btn" type="button" value="创建列表">
<ul id="ul1">
</ul>
</body>
</html>删除DOM元素
父级.removeChild(子节点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1');
for(var i=0;i<aA.length;i++)
{
aA[i].onclick=function()
{
oUl.removeChild(this.parentNode);
};
}
};
</script>
</head>
<body>
<ul id="ul1">
<li>第一条<a href="javascript:;">删除</a></li>
<li>第二条<a href="javascript:;">删除</a></li>
<li>第三条<a href="javascript:;">删除</a></li>
</ul>
</body>
</html>文档碎片
1、文档碎片可以提高DOM操作性能（理论上）
2、文档碎片原理
3、document.createDocumentFragment()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var oUl=document.getElementById('ul1');
var oFrag=document.createDocumentFragment();
for(var i=0;i<10000;i++)
{
var oLi=document.createElement('li');
oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);
};
</script>
</head>
<body>
<ul id="ul1">
</ul>
</body>
</html>