元素(element)创建

一、元素创建的三种方式-------元素创建是为了提高用户的体验

1、第一种

document.write("标签代码及内容")

    <input type="button" value="创建一个p" id="btn">
    <script>
        document.getElementById("btn").onclick=function(){
            document.write("<p>这是一个P</p>")
        };
    </script>

• 缺陷：页面加载完毕时后，通过这种方式创建的元素会覆盖原有页面的所有内容

• 扩展：document.write可以嵌入外部的代码（百度新闻代码为例）

2、第二种

对象.innerHTML="标签代码及内容"

<input type="button" value="创建一个P" id="btn">
    <div id="dv"></div>
    <script>
        document.getElementById("btn").onclick=function(){
            document.getElementById("dv").innerHTML="<p>这是一个P</p>";
        }
    </script>

• 案例1：点击按钮创建图片

<input type="button" value="来个图片" id="btn">
       <div id="dv"></div>
       <script>
           document.getElementById("btn").onclick=function(){
               document.getElementById("dv").innerHTML="<img src='1big.png' />"
           };
       </script>

• 案例2：点击按钮创建列表

       <input type="button" value="创建列表" id="btn">
       <div id="dv"></div>
       <script>
           var names=["java","python","c","javascript","php","html","css"];
           document.getElementById("btn").onclick=function(){
               var str="<ul>";
               //根据循环创建对应的li
               for(var i=0;i<names.length;i++){
                   str=str+"<li>"+names[i]+"</li>";
               }
               str=str+"</ul>";
               document.getElementById("dv").innerHTML=str;
               //代码到这里,li已经有了
               //获取所有的li,遍历,添加鼠标进入事件和鼠标离开事件
               var list=document.getElementById("dv").getElementsByTagName("li");
               for(var i=0;i<list.length;i++){
                    //鼠标进入
                    list[i].onmouseover=function(){
                        this.style.backgroundColor="yellow";
                    };
                    //鼠标离开
                    list[i].onmouseout=function(){
                        this.style.backgroundColor="";
                    };
               }
           };
       </script>

3、第三种

document.createElement("标签名字")------->是一个对象

    <input type="button" value="创建P" id="btn">
    <div id="dv"></div>
    <script>
        document.getElementById("btn").onclick=function(){
            //首先需要创建元素,得到一个对象
            var pobj=document.createElement("p");
            //往对象里面写入内容
            pobj.innerHTML="这是一个p";
            //把创建的子元素追加到父级元素中
            document.getElementById("dv").appendChild(pobj);
        }
    </script>

• 步骤：创建---------------->追加（方法见后面元素的相关方法）
• 案例1：点击按钮动态创建列表

    <input type="button" value="创建列表" id="btn">
    <div id="dv"></div>
    <script>
        var names=["java","python","c","javascript","php","html","css"];
        document.getElementById("btn").onclick=function(){
            //创建ul,把ul追加到父级元素div中
            var ulobj=document.createElement("ul");
            document.getElementById("dv").appendChild(ulobj);
            //动态的创建li,加到ul中
            for(var i=0;i<names.length;i++){
                //创建li
                var liobj=document.createElement("li");
                //li里面添加文本内容
                liobj.innerHTML=names[i];
                //把里追加到ul里
                ulobj.appendChild(liobj);
                //为li添加鼠标进入和离开事件(此处使用命名函数)
                liobj.onmouseover=mouseoverHandle;
                liobj.onmouseout=mouseoutHandle;
            }
        };
        function mouseoverHandle(){
            this.style.backgroundColor="red";
        }
        function mouseoutHandle(){
            this.style.backgroundColor="";
        }
    </script>

• 案例2：点击按钮创建表格

        var arr=[
                {name:"百度",href:"www.baudu.com"},
                {name:"百度",href:"www.baudu.com"},
                {name:"百度",href:"www.baudu.com"},
                {name:"百度",href:"www.baudu.com"},
                {name:"百度",href:"www.baudu.com"}
            ];
            document.getElementById("btn").onclick=function(){
                //创建table,加到div
                var tableobj=document.createElement("table");
                tableobj.border="1";
                tableobj.cellPadding="0";
                tableobj.cellSpacing="0";
                document.getElementById("dv").appendChild(tableobj);
                for(var i=0;i<arr.length;i++){
                    var dt=arr[i];//每个对象
                    //创建行,把行加到table中
                    var trobj=document.createElement("tr");
                    tableobj.appendChild(trobj);
                    //创建第一个列,加入到行中
                    var td1=document.createElement("td");
                    td1.innerHTML=dt.name;
                    trobj.appendChild(td1);
                     //创建第二个列,加入到行中
                    var td2=document.createElement("td");
                    td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
                    trobj.appendChild(td2);
                }
            };
        </script>

• 注意：如果是循环方式添加时间，推荐使用命名函数，可以节省空间（例1鼠标进入和离开事件）
• 延伸：如何治创建一个元素（思路：有则删除，无则创建）------上述方法重复点击按钮会一直创建元素

        <input type="button" value="创建一个按钮" id="btn">
        <div id="dv"></div>
        <script>
            document.getElementById("btn").onclick=function(){
                if(!document.getElementById("btn2")){//如果没有则创建
                    var obj=document.createElement("input");
                    obj.type="button";
                    obj.value="按钮";
                    obj.id="btn2";
                    document.getElementById("dv").appendChild(obj);
                }
            };
        </script>

二、元素相关的方法

        //1.追加子元素
        父元素.appendChild(子元素);
        //2.把新的子元素插入到第一个子元素的前面
        父元素.insertBefore(新的子元素,第一个子元素);
        //3.替换
        父元素.replaceChild(新的子元素,要替换的子元素);
        //4.移除元素
        父元素.removeChild(子元素)