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>

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