JavaScript实现动态添加Form表单元素的方法示例

下面是JavaScript实现动态添加Form表单元素的方法示例：

1. 添加input元素示例

在HTML中先定义一个form表单，并在其中定义一个按钮，点击按钮时触发JavaScript代码动态添加input元素：

<!DOCTYPE html>
<html>
<head>
<title>动态添加表单元素</title>
<script type="text/javascript">
    function addInput() {  // 点击按钮时调用该函数
        var input = document.createElement("input");  // 创建input元素
        input.type = "text";  // 设置input元素类型为text
        input.name = "userName";  // 设置input元素name属性
        var form = document.getElementById("myForm");
        form.appendChild(input);  // 将input元素添加到form表单中
    }
</script>
</head>
<body>
<form id="myForm" method="post" action="">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" placeholder="请输入用户名"><br/><br/>
    <button type="button" onclick="addInput()">添加输入框</button>  <!-- 点击该按钮时动态添加input元素 -->
    <br/><br/>
    <input type="submit" value="提交">
</form>
</body>
</html>

上述代码中，首先定义一个函数addInput()，该函数在点击按钮时将动态创建一个input元素，并将其添加到form表单中。其中，使用document.createElement()函数创建一个新的HTML元素，该函数接收一个元素名称作为参数，我们这里创建的是一个input元素。然后，我们设置了该元素的type和name属性，最后使用appendChild()函数将该元素添加到form表单中。

2. 添加select元素示例

在HTML中先定义一个form表单，并在其中定义一个按钮，点击按钮时触发JavaScript代码动态添加select元素（下拉列表）：

<!DOCTYPE html>
<html>
<head>
    <title>动态添加表单元素</title>
    <script type="text/javascript">
        function addSelect() {  // 点击按钮时调用该函数
            var select = document.createElement("select");  // 创建select元素
            var option1 = document.createElement("option");  // 创建option元素
            option1.value = "0";  // 设置option元素的value属性
            option1.text = "选择颜色";  // 设置option元素的文本内容
            select.add(option1);  // 将option元素添加到select元素中
            var option2 = document.createElement("option");
            option2.value = "1";
            option2.text = "红色";
            select.add(option2);
            var option3 = document.createElement("option");
            option3.value = "2";
            option3.text = "蓝色";
            select.add(option3);
            var form = document.getElementById("myForm");
            form.appendChild(select);  // 将select元素添加到form表单中
        }
    </script>
</head>
<body>
    <form id="myForm" method="post" action="">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名"><br/><br/>
        <button type="button" onclick="addSelect()">添加下拉列表</button>  <!-- 点击该按钮时动态添加select元素 -->
        <br/><br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>

上述代码中，我们创建了一个函数addSelect()，该函数点击按钮时将动态创建一个select元素，并将三个option元素添加到其中。其中，我们使用document.createElement()函数分别创建了一个select元素和三个option元素，并分别设置了它们的value和text属性。最后，我们使用appendChild()函数将select元素添加到form表单中。

以上就是实现动态添加Form表单元素的方法示例的详细讲解。其基本思路是使用document.createElement()函数创建一个新的HTML元素，然后设置该元素的属性和内容，最后通过appendChild()函数将该元素添加到form表单中即可。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现动态添加Form表单元素的方法示例 - Python技术站

JavaScript实现动态添加Form表单元素的方法示例

1. 添加input元素示例

2. 添加select元素示例

相关文章