在javascript中动态添加输入

时间:2014-09-30 18:57:16

标签: javascript jquery html css

我是javascript的新手,我需要一些帮助来理解这段代码以及它为什么不起作用。

<html>
<head>
    <title></title>
</head>
<body>

    <form action="" method="POST">
        <input id="in" type="text" name="name">
    </form>
    <button id="add">addone</button>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
        $('#add').click(function() {
          $('#in').append('<br /><input type="text" name="name">');
        });

    </script>

</body>
</html>

我试图添加另一个html输入,但我不知道它为什么不起作用!?。

1 个答案:

答案 0 :(得分:4)

输入是自动关闭的,它没有子节点,您无法附加它。

然而,您可以在

之后插入

$('#in').after('<br /><input type="text" name="name">');

&#13;
&#13;
<html>
<head>
    <title></title>
</head>
<body>

    <form action="" method="POST">
        <input id="in" type="text" name="name">
    </form>
    <button id="add">addone</button>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
       $('#add').click(function() {
        $('#in').after('<br /><input type="text" name="name">');
    });

    </script>

</body>
</html>
&#13;
&#13;
&#13;

请注意,您使用name[]复制名称,并根据您要使用的内容进行复制可能是一个好主意吗?