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

Posted 2023-02-24

【中文标题】使用 jquery 在单击时将 html 输入框添加到 div

【英文标题】：Add html input boxes to a div on click using jquery

【发布时间】：2011-09-28 15:55:50

【问题描述】：

我需要在单击按钮的页面上添加输入框，我编写了以下 jquery 脚本。第一次点击时添加一个输入框，但不重复添加。

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

有人可以帮我修改代码，以便每次单击按钮时都会添加一个输入框。

【参考方案1】：

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

或按照其他人的建议使用 append

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

【参考方案2】：

您的代码当前将 #fileInput 元素中的现有 HTML 替换为相同的 HTML。您可能想要使用的是append() 方法。

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

【参考方案3】：

这是因为您不是每次都添加到 HTML 中，您只是将其设置为显示单个 input。

【参考方案4】：

尝试使用append 而不是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>