使用JavaScript动态的添加组件

Posted 2021-02-06 djuwcnhwbx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用JavaScript动态的添加组件相关的知识，希望对你有一定的参考价值。

使用javascript进行动态的网页窗体组件的添加是一件很方便也很容易实现的事情。话不多说，边看代码边做解释吧。

准备工作

由于html页面中不可以添加java代码，所以我在jsp页面中进行了测试。
添加的窗体是作为一个子窗体嵌套在外层窗体组件中的，优点在于方便整体的删除和修改操作
注意为添加的窗体组件添加name属性。

代码展示

<html>
<title>动态添加表单输入项的测试</title>
<head></head>
<script type="text/javascript">
    function addfile(){
        var files = document.getElementById("files");

        var input = document.createElement("input");
        input.type=‘file‘;
        input.name=‘file‘;

        var btn = document.createElement("input");
        btn.type=‘button‘;
        btn.value=‘删除‘;
        btn.onclick = function del(){
            this.parentNode.parentNode.removeChild(this.parentNode);
        }

        var div = document.createElement("div");
        div.appendChild(input);
        div.appendChild(btn);

        files.appendChild(div);

    }



</script>
<body>
<table>
    <tr>
        <td>上传用户</td>
        <td>
            <input type="text" name="username">
        </td>
    </tr>
    <tr>
        <td>上传文件</td>
        <td>
            <input type="button" value="添加上传文件" onclick="addfile()">
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <div id="files"></div>
        </td>
    </tr>

</table>


</body>

</html>