添加/删除子元素的笔记

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>