快捷導(dǎo)航

基于dom編程中動(dòng)態(tài)創(chuàng)建與刪除元素的使用

更新時(shí)間：2013年04月17日 14:26:34 作者：

本篇文章小編將為大家介紹，基于dom編程中動(dòng)態(tài)創(chuàng)建與刪除元素的使用，有需要的朋友可以參考一下

<html>
<head>
<script type="text/javascript">
    function test(){        
        //createElement()  創(chuàng)建一個(gè)指定標(biāo)簽名的元素[比如:動(dòng)態(tài)創(chuàng)建超鏈接]
        var createa=document.createElement("a");
        createa.id="a1";
        createa.innerText="連接到百度";
        createa.;
        //createa.color="green" ////添加顏色(不要忘記style屬性，不然沒(méi)有效果)
        createa.style.color="green"
        //添加默認(rèn)位置--body 并且添加子節(jié)點(diǎn)
        //document.body.appendChild(createa);
        //放置指定位置
        document.getElementById("div1").appendChild(createa);
    }

    function test2(){
        //指定位置刪除節(jié)點(diǎn)removeChild()
        document.getElementById("div1").removeChild(document.getElementById("a1")); //id 名重復(fù) js只取第一個(gè)
    }
</script>
</head>
<body>
<!--動(dòng)態(tài)創(chuàng)建元素-->
<input type="button" value="創(chuàng)建一個(gè)a標(biāo)簽" onclick="test()"/><br/>
<input type="button" value="刪除創(chuàng)建一個(gè)a標(biāo)簽" onclick="test2()"/>
<div id="div1" style="width:400px;height:300px;border:1px solid silver">
</div>
</body>
</html>

復(fù)制代碼代碼如下:

<html>
<head>
<script type="text/javascript">
    function test(){        
        //createElement()  創(chuàng)建一個(gè)指定標(biāo)簽名的元素[比如:動(dòng)態(tài)創(chuàng)建超鏈接]
        var createa=document.createElement("a");
        createa.id="a1";
        createa.innerText="連接到百度";
        createa.;
        //createa.color="green" ////添加顏色(不要忘記style屬性，不然沒(méi)有效果)
        createa.style.color="green"
        //添加默認(rèn)位置--body 并且添加子節(jié)點(diǎn)
        //document.body.appendChild(createa);
        //放置指定位置
        $("div1").appendChild(createa);
    }

    function test2(){
        //指定位置刪除節(jié)點(diǎn)removeChild()
        $("div1").removeChild($("a1"));
    }
　　//定義一個(gè)函數(shù) 返回給定id的對(duì)象
    function $(id){
        return document.getElementById(id);
    }
</script>
</head>
<body>
<!--動(dòng)態(tài)創(chuàng)建元素-->
<input type="button" value="創(chuàng)建一個(gè)a標(biāo)簽" onclick="test()"/><br/>
<input type="button" value="刪除創(chuàng)建一個(gè)a標(biāo)簽" onclick="test2()"/>
<div id="div1" style="width:400px;height:300px;border:1px solid silver">
</div>
</body>
</html>