DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 基於dom編程中 動態創建與刪除元素的使用
基於dom編程中 動態創建與刪除元素的使用
編輯:JavaScript基礎知識     
復制代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
    function test(){       
        //createElement()  創建一個指定標簽名的元素[比如:動態創建超鏈接]
        var createa=document.createElement("a");
        createa.id="a1";
        createa.innerText="連接到百度";
        createa.href="http://www.baidu.com";
        //createa.color="green" ////添加顏色(不要忘記style屬性,不然沒有效果)
        createa.style.color="green"
        //添加默認位置--body 並且添加子節點
        //document.body.appendChild(createa);
        //放置指定位置
        document.getElementById("div1").appendChild(createa);
    }

    function test2(){
        //指定位置刪除節點removeChild()
        document.getElementById("div1").removeChild(document.getElementById("a1")); //id 名重復 js只取第一個
    }
</script>
</head>
<body>
<!--動態創建元素-->
<input type="button" value="創建一個a標簽" onclick="test()"/><br/>
<input type="button" value="刪除創建一個a標簽" onclick="test2()"/>
<div id="div1" style="width:400px;height:300px;border:1px solid silver">
</div>
</body>
</html>

復制代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
    function test(){       
        //createElement()  創建一個指定標簽名的元素[比如:動態創建超鏈接]
        var createa=document.createElement("a");
        createa.id="a1";
        createa.innerText="連接到百度";
        createa.href="http://www.baidu.com";
        //createa.color="green" ////添加顏色(不要忘記style屬性,不然沒有效果)
        createa.style.color="green"
        //添加默認位置--body 並且添加子節點
        //document.body.appendChild(createa);
        //放置指定位置
        $("div1").appendChild(createa);
    }

    function test2(){
        //指定位置刪除節點removeChild()
        $("div1").removeChild($("a1"));
    }
  //定義一個函數 返回給定id的對象
    function $(id){
        return document.getElementById(id);
    }
</script>
</head>
<body>
<!--動態創建元素-->
<input type="button" value="創建一個a標簽" onclick="test()"/><br/>
<input type="button" value="刪除創建一個a標簽" onclick="test2()"/>
<div id="div1" style="width:400px;height:300px;border:1px solid silver">
</div>
</body>
</html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved