使用jquery在单击时将html输入框添加到div

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" />');
   }

Answer 3

那是因为你不是每次都添加 HTML，你只是将它设置为显示单个input 。

Answer 4

try using append instead of html : http://api.jquery.com/append/

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