天天看點
傳回

javascript動态建立頁面元素

<html>

<head>

<title></title>

<script language="javascript">

    function createDiv(){

        var chileE1 = document.createElement("div");

        var txtNode =  document.createTextNode("winson");

        chileE1.appendChild(txtNode);

        //注意之裡是document.body

        document.body.appendChild(chileE1);

    }

    function updateDiv(){

        var obj = document.getElementById("tt");

        var txtNode =  document.createTextNode("ffff");

        tt.appendChild(txtNode);

    }

    function createTab(){

        var eTab = document.createElement("table");

        eTab.tbody");

        var eTr1 = document.createElement("tr");

        var eTr2 = document.createElement("tr");

        var eTd1 = document.createElement("td");

        var eTd2 = eTd1.cloneNode();//也可以使用克隆的方法

        var eTd3 = document.createElement("td");

        var eTd4 = document.createElement("td");

        var eTd5 = document.createElement("td");

        var eTd6 = document.createElement("td");

        var txtNode1 =document.createTextNode("1");

        var txtNode2 =txtNode1.cloneNode();  //也可以使用克隆的方法

        txtNode2.nodeValue = "dfdf"; //使用nodeValue重新指派

        var txtNode3 =document.createTextNode("3");

        var txtNode4 =document.createTextNode("4");

        var txtNode5 =document.createTextNode("5");

        var txtNode6 =document.createTextNode("6");

        eTd1.appendChild(txtNode1);

        eTd2.appendChild(txtNode2);

        eTd3.appendChild(txtNode3);

        eTd4.appendChild(txtNode4);

        eTd5.appendChild(txtNode5);

        eTd6.appendChild(txtNode6);

        eTr1.appendChild(eTd1);

        eTr1.appendChild(eTd2);

        eTr1.appendChild(eTd3);

        eTr2.appendChild(eTd4);

        eTr2.appendChild(eTd5);

        eTr2.appendChild(eTd6);

        eTbody.appendChild(eTr1);

        eTbody.appendChild(eTr2);

        eTab.appendChild(eTbody);

        document.body.appendChild(eTab);

    }

    function createByinnerHTML(){

        var obj = document.getElementById("tt");

        obj.innerHTML ="<table ><tr><td>dfdf</td></tr></table>";

    }

</script>

</head>

<body>

<div id="tt"></div>

<input type="button" value="建立div" οnclick="createDiv();">

<input type="button" value="更改div" οnclick="updateDiv();">

<input type="button" value="建立table" οnclick="createTab();">

<input type="button" value="使用innerHTML" οnclick="createByinnerHTML();">

</body>

</html> 

ajax javascript button table function input div
上一篇: iPhone-編寫Apple Push Notification伺服器 (轉)
下一篇: 腳本動态建立例子

繼續閱讀