Add html input boxes to a div on click using jquery

Question

I need to add input boxes to a page onclick of a button, I have written the following jquery script. It adds one input box when clicked the first time but does not repeat adding.

<script type="text/javascript">
   function addInput(){
      $('#fileinput').html('<label>Filename:</label>
                        <input type="file" name="file"  id="file" />');
   }
</script>

can some one please help me to modify the code so that it will add an input box each time the button is clicked.

Answer 1

$('#buttonID').click(function(){
    $('#fileinput').html($('#fileinput').html()+'<label>Filename:</label>
                    <input type="file" name="file"  id="file" />');
});

or use append as others suggested

$('#buttonID').click(function(){
    $('#fileinput').append('<label>Filename:</label>
                    <input type="file" name="file"  id="file" />');
});

Answer 2

Your code currently replaces the existing HTML in your #fileInput element with the same HTML. What you probably want to use is the append() method.

   function addInput(){
      $('#fileinput').append('<label>Filename:</label>
                        <input type="file" name="file"  id="file" />');
   }