js操作dom的一些基本用法

1.js添加dom元素

2.js移除dom元素

<h1>add dom:add text</h1>

<pre style='color:red'>
1.添加dom时，直接在a标签上添加单击事件！

</pre>

<input type=text id='text' value='a new li'/>
<input type=button id='btn1' value='add one with these letters'/>

<hr>
<input type=text id='text2' value=''/>
<input type=button id='btn2' value='remove which one'/>
<ul id='list'>
	<li class=box>1<a href='javascript:void(0);'>删除</a></li>
	<li>2<a href='javascript:void(0);'>删除</a></li>
	<li class=box>3<a href='javascript:void(0);'>删除</a></li>
	<li>4<a href='javascript:void(0);'>删除</a></li>
	<li>5<a href='javascript:void(0);'>删除</a></li>
</ul>
<hr>
<div id=show></div>

<style>
.box{border:1px solid blue;}

</style>

<script>
//----------------------------------------------
// 工具函数
//----------------------------------------------
//根据id获取obj
function $(s){
	if(typeof s=='object') return s;
	return document.getElementById(s);
}

function n(s){
	$('show').innerHTML += s+'<br>';
}


window.onload=function(){
	oUl=$('list');
	
	//这是一个动态数组
	aLi=oUl.getElementsByTagName('li');
	aA=oUl.getElementsByTagName('a');
	
	//为每个 删除 按钮绑定事件
	for(var i=0; i<aA.length; i++){
		aA[i].onclick=function(){
			oUl.removeChild(this.parentNode)
		}
	}
	
	
	
	//删除事件
	//父级.removeChild(子节点);
	$('btn2').onclick=function(){
		//获取删除位置
		var num=$('text2').value
		oUl.removeChild(aLi[num]);
	}
	
	
	
	
	//添加事件
	$('btn1').onclick=function(){
		//创建子节点
		var oLi=document.createElement('li');
		
		var text=$('text').value;
		//在节点中插入内容
		//oLi.innerHTML=text;
		
		//或使用dom方式插入内容
		var textNode=document.createTextNode(text) 
		oLi.appendChild(textNode);
		
		//插入a标签
		var oA=document.createElement('a');
		//一旦创建，立刻添加单击事件
		oA.onclick=function(){
			oUl.removeChild(this.parentNode)
		}
		oA.innerHTML='删除';
		oA.setAttribute('href','javascript:void(0);');
		//插入到li中
		oLi.appendChild(oA);
		
		//插入到原来dom中
		//父级.appendChild(子节点);
		//oUl.appendChild(oLi);
		
		//父级.insertBefore(子节点, 在谁之前插入); 
		if(aLi.length>0){//如果不为空
			oUl.insertBefore(oLi,aLi[0]);//任何位置都可以	
		}else{//如果为空
			oUl.appendChild(oLi);
		}
	}
}

</script>

--------------