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>

 

　　

 

posted @ 2014-04-01 10:15  潇潇杀  阅读(173)  评论(0)    收藏  举报