DOM的基本操作
创建DOM元素
createElement (标签名) 创建一个节点 document.createElement('元素名');
appendChild (节点) 追加一个节点 obj.appendChild(元素名);
插入元素
insertBefore (节点，原有的节点)在已有的元素前面插入 obj.insertBefore(元素名,元素名[0]); (注意要至少存在一个元素)
删除DOM元素
removeChild (节点) 删除一个节点 obj.removeChild(元素名)
文档碎片(提高DOM性能)
var a=document.createDocumentFragment();
a.appendChild(oLi);
oul.appendChild(a);
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>DOM的简单操作</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{
margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑';
}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:black;}
ul li{
list-style:none;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var oBtn = $('btn');
var otxt = $('txt');
var oUl = $('box');
var oLi = oUl.getElementsByTagName('li');
var oA = null;
oBtn.onclick = function(){
var aLi = document.createElement('li');
if(otxt.value==''){
alert('没有填写内容');
return;
}
aLi.innerHTML = otxt.value+'<a href=\'javascript:\'>删除</a>';
if(oLi.length){
oUl.insertBefore(aLi,oLi[0]);
}else{
oUl.appendChild(aLi);
}
otxt.value='';
oA = oUl.getElementsByTagName('a');
for(var i=0;i<oA.length;i++){
oA[i].onclick = function(){
oUl.removeChild(this.parentNode);
};
};
}
}
function $(id){
return document.getElementById(id);
}
</script>
<input type='text' value='' id='txt'><input type='button' id='btn' value='确定'>
<ul id='box'>
</ul>
</body>
</html>
