首页 > 代码库 > JS操作DOM

JS操作DOM

【功能:点击按钮显示表单】

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>    function displays()    {        //定义节点        var myRoot = document.getElementById("show");        var form = document.createElement("form");        var table = document.createElement("table");        var tr = new Array(3);        var td = new Array(6);        var input = new Array(6);        for(var i = 0; i < tr.length; i++)        {            tr[i] = document.createElement("tr");         }        for(var i = 0; i < td.length; i++)        {            td[i] = document.createElement("td");         }        for(var i = 0; i < input.length; i++)        {            input[i] = document.createElement("input");         }        //连接节点        myRoot.appendChild(form);        form.appendChild(table);        for(var i = 0; i < tr.length; i++)        {            table.appendChild(tr[i]);        }        for(var i = 0, j = -0.5; i < td.length; i++, j += 0.5)        {            tr[Math.round(j)].appendChild(td[i]);            td[i].appendChild(input[i]);        }        //设置属性        input[0].type="text";        input[0].value="用户名:";        input[0].style.border="none";        input[0].readOnly="true";        input[1].type="text";        input[2].type="text";        input[2].value="密码:";        input[2].style.border="none";        input[2].readOnly="true";        input[3].type="password";        input[4].type="reset";        input[5].type="submit";    }</script></head><body>    <input type="button" value="显示表单" onclick="displays();">    <br/><br/><br/><br/>    <div id="show">    </div></body></html>

 

JS操作DOM