oLi=document.createElement('li');------------创建元素oLi
oUl.appendChild(oLi);------------------------插入元素到oUl尾部
oUl.insertBefore(oLi,aLi[0]);-----------------插入元素到aLi[0]前部
oUl.removeChild(this.parentNode);-----------移除
document.createDocumentFragment()----------文档碎片可以提高DOM操作性能（理论上的）
使用了创建元素，改变元素，删除元素的函数来完成了仿制博客园的首页
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>operateElement</title> 6 </head> 7 <style type="text/css"> 8 body{background: #CCCC9A;} 9 #box{margin: 10px auto; 780px;background: #F6F2E6;height: 100%;} 10 .page{ 600px;height: 200px;margin: 20px auto;background: #CCC;} 11 .delete{position: relative;top: 170px;left: 550px;} 12 .edit{position: relative;top: 140px;left: 605px;} 13 .submit{position: relative;top: -30px;left: 600px;} 14 #head{background-image: url(pic/newBlogBg.png);height: 200px;} 15 #create{position: relative;left: 550px;top: 150px;} 16 </style> 17 <script type="text/javascript"> 18 window.onload=function(){ 19 oCreate=document.getElementById('create'); 20 oEdit=document.getElementsByClassName('edit'); 21 oDelete=document.getElementsByClassName('delete'); 22 oPage=document.getElementsByClassName('page'); 23 oBox=document.getElementById('box'); 24 var flag=0; 25 var turn=0; 26 var i=0; 27 function createBlankPage(){ 28 flag=1; 29 oBlankPage=document.createElement('div'); 30 oBlankPage.className='page'; 31 oSubmit=document.createElement('input'); 32 oSubmit.type='button'; 33 oSubmit.className='submit'; 34 oSubmit.value='submit'; 35 oText=document.createElement('textarea'); 36 oText.cols="82"; 37 oText.rows="13"; 38 oBlankPage.appendChild(oText); 39 oBlankPage.appendChild(oSubmit); 40 oBox.insertBefore(oBlankPage,oPage[turn]); 41 oTecentPage=document.createElement('div'); 42 oTecentPage.innerHTML=oPage[turn+1].innerHTML; 43 } 44 function createNewPage(){ 45 oNewPage=document.createElement('div'); 46 oNewPage.className='page'; 47 oNewPage.innerHTML=oTecentPage.innerHTML; 48 oNewPage.getElementsByTagName('p')[0].innerHTML=oText.value; 49 oNewPage.getElementsByClassName('edit')[0].onclick=edit; 50 oNewPage.getElementsByClassName('delete')[0].onclick=deletePage; 51 oBox.removeChild(this.parentNode); 52 oBox.insertBefore(oNewPage,oPage[turn]); 53 flag=0; 54 } 55 function edit(){ 56 if(flag==0){ 57 oPage=document.getElementsByClassName('page'); 58 oEdit=document.getElementsByClassName('edit'); 59 for(i=0;i<oPage.length;i++) oEdit[i].index=i; 60 turn=this.index; 61 createBlankPage(); 62 oText.value=this.parentNode.getElementsByTagName('p')[0].innerHTML; 63 oBox.removeChild(this.parentNode); 64 oSubmit.onclick=createNewPage; 65 } 66 else alert("Please submit ahead."); 67 } 68 function deletePage(){ 69 oBox.removeChild(this.parentNode); 70 } 71 oCreate.onclick=function(){ 72 if(flag==0){ 73 createBlankPage(); 74 oSubmit.onclick=createNewPage; 75 } 76 else alert("Please submit ahead."); 77 } 78 for(i=0;i<oEdit.length;i++){ 79 oEdit[i].index=i; 80 oEdit[i].onclick=edit; 81 oDelete[i].onclick=deletePage; 82 } 83 } 84 </script> 85 <body> 86 <div id="box"> 87 <div id="head"><input value="newBlog" type="button" id="create" /></div> 88 <div class="page"> 89 <input class="edit" type="button" value="edit" /> 90 <input class="delete" type="button" value="delete" /> 91 <p>This is the first page.</p> 92 </div> 93 <div class="page"> 94 <input class="edit" type="button" value="edit" /> 95 <input class="delete" type="button" value="delete" /> 96 <p>This is the second page.</p> 97 </div> 98 <div class="page"> 99 <input class="edit" type="button" value="edit" /> 100 <input class="delete" type="button" value="delete" /> 101 <p>For the reason of timewasted,haven't do the function of newblog when page is 0.</p> 102 </div> 103 </div> 104 </body> 105 </html>