JS操作DOM-优快云博客

本文介绍了一种使用JavaScript动态创建HTML表单的方法。通过点击按钮触发函数，该函数会生成包含文本输入框和密码输入框等元素的表单，并将其插入到指定的HTML区域中。这种技术对于实现动态网页具有重要意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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