• 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>

     

  • 相关阅读:
    滑动条使用
    jquery日历练习
    JQuery 教程
    JS获取各种宽度、高度的简单介绍
    如何获取元素位置
    DOM练习
    DOM
    函数
    假期练习
    Uva 253 Cube painting
  • 原文地址:https://www.cnblogs.com/guanghe/p/5950537.html
Copyright © 2020-2023  润新知