1.创建元素 createElement、appendChild（两者同时使用）createElement用于创建一个子节点，appendChild用于添加一个子节点
父.appendChild(子节点) 插入在后面 《语法》
2. 添加元素的性能差异
oUl.appendChild(oLi);//为了提高性能，我们在插入元素之前，把所有应该改变的东西都先搞完，最后进行子节点的插入。
3. insertBefore方法及实例
父.insertBefore(子节点，谁之前) 插入在谁之前《语法》
注意：
if (aLi.length==0) {
oUl.appendChild(oLi);//当没有第一个元素时，就用appendChild在尾部来添加子元素
}
else{
oUl.insertBefore(oLi,aLi[0]);//当有第一个元素时，就用insertBefore(在头部来添加子元素
}//注意：插入必须是在已有元素前插入，若没有已有元素，则需要用appendChild在尾部来添加一个子元素
4. 删除元素：removeChild方法
removeChild(节点)
父.removeChild（子节点）;
for(i=0;i<aA.length;i++)
{
aA[i].onclick=function ()
{
oUl.removeChild(this.parentNode);
}
}
//this.parentNode表示的是该元素的父节点；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var aA=document.getElementsByTagName('a'); var oUl=document.getElementById('ul1'); var i=0; for(i=0;i<aA.length;i++) { aA[i].onclick=function () { oUl.removeChild(this.parentNode); } } } </script> </head> <body> <ul id="ul1"> <li>sdfsdf <a href="javascript:;">删除</a></li> <li>3432 <a href="javascript:;">删除</a></li> <li>tttt <a href="javascript:;">删除</a></li> <li>ww <a href="javascript:;">删除</a></li> </ul> </body> </html>
下面是插入元素的源代码
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 <style> 5 </style> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>无标题文档</title> 8 <script type="text/javascript"> 9 //---------------------------------------------------------------------/ 创建元素 createElement、添加（插入）元素appendChild //这两个同时使用 appendChild 在一个父级上添加一个子节点 10 window.onload=function () 11 { 12 var oTxt=document.getElementById('text'); 13 var oBtn=document.getElementById('btn1'); 14 var oUl=document.getElementById('ul1'); 15 var aLi=document.getElementsByTagName('li'); 16 oBtn.onclick=function () 17 { 18 var oLi=document.createElement('li'); 19 oLi.innerHTML=oTxt.value; 20 //父.appendChild(子节点) 插入在后面 《语法》 21 //oUl.appendChild(oLi);//为了提高性能，我们在插入元素之前，把所有应该改变的东西都先搞完，最后进行子节点的插入。 22 23 //父.insertBefore(子节点，谁之前) 插入在谁之前《语法》 24 // oUl.insertBefore(oLi,aLi[0]); 25 if (aLi.length==0) { 26 oUl.appendChild(oLi);//当没有第一个元素时，就用appendChild在尾部来添加子元素 27 } 28 else{ 29 oUl.insertBefore(oLi,aLi[0]);//当有第一个元素时，就用insertBefore(在头部来添加子元素 30 } 31 32 Check();//函数调用 在所有的子节点插入完毕之后进行一个判断函数 33 } 34 35 function Check(){ 36 37 // alert(aLi.length); 38 for (var i = 0; i < aLi.length; i++) { 39 if (i%2==0) { 40 aLi[i].style.backgroundColor="#ccc"; 41 }else{ 42 aLi[i].style.backgroundColor="#FFF"; 43 } 44 }; 45 } 46 } 47 </script> 48 </head> 49 50 <body> 51 <input id="text" type="text" /> 52 <input id="btn1" type="button" value="创建Li"/> 53 <ul id="ul1"> 54 55 </ul> 56 </body> 57 </html>