dynamic add input in javascript

Question

I'm new at javascript and I need some help making sense of this code and why it's not working.

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

I'm trying to append another html input but I have no ideas why it's not working!?.

An input has no children

tymeJV
– tymeJV

2014-09-30 19:00:48 +00:00
Commented Sep 30, 2014 at 19:00 — tymeJV
– tymeJV, Commented Sep 30, 2014 at 19:00

adeneo · Accepted Answer · 2014-09-30 19:00:52Z

4

An input is self-closing, it has no children, and you can't append to it.

You can however insert something after it

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

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

Note that your duplicating the name, and depending on what you indend to do with it, using name[] could be a good idea ?

answered Sep 30, 2014 at 19:00

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

dynamic add input in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related