Question

我想在表单标签内使用jQuery动态添加一些html元素，但是它不起作用。

$(document).ready(function() {
  var requirements = 0;
  var container = $(document.createElement('div').addClass('form-group'));

  $('#add-req').click(function() {
    if (requirements <= 15) {
      requirements = requirements + 1;
      $(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
      $('#requirement-div').after(container);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
  <form action="#" method="post">
    <div class="styled-input form-group">
      <input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
    </div>
    <div class="styled-input">

      <div class="form-group">
        <input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
      </div>
      <input type="button" value="add Requirements" id="add-req">
      <input type="submit" value="Submit">
    </div>
  </form>
</div>

当我单击添加需求按钮时，它应该在div元素内创建另一个input标签和form元素。

Answer 1

只需将代码$(document.createElement('div').addClass('form-group'));替换为$(document.createElement('div')).addClass('form-group')；

Answer 2

尝试以下操作

我们可以直接在targer元素中插入一个 html 元素，如下所示：

$(document).ready(function(){
           var requirements=0;
            $('#add-req').click(function(){
                if(requirements<=15){
                    requirements=requirements+1;
                    $('#requirement-div').after('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
                }
            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
        <form action="#" method="post" >
            <div class="styled-input form-group">
                <input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
            </div>
            <div class="styled-input">

                <div class="form-group">
                    <input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
                </div>
                <input type="button" value="add Requirements" id="add-req">
            <input type="submit" value="Submit">
            </div>
        </form>
    </div>

Answer 3

您在JS和JQuery之间混合使用，其中document.createElemet（'div'）是JS函数，而addClass是JQuery函数。

$(document).ready(function(){
    var requirements = 0;
    var container=$('<div>').addClass('form-group');

    $('#add-req').click(function(){
        if(requirements<=15){
            requirements=requirements+1;
            container.append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
            $(this).before(container);
        }
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
    <form action="#" method="post" >
        <div class="styled-input form-group">
            <input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
        </div>
        <div class="styled-input">

            <div class="form-group">
                <input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
            </div>
            <input type="button" value="add Requirements" id="add-req">
        <input type="submit" value="Submit">
        </div>
    </form>
</div>

Answer 4

替换下面的代码

<script>
    $(document).ready(function(){
        var requirements=0;
        var container=$(document.createElement('div')).addClass('form-group');

        $('#add-req').click(function(){
            if(requirements<=15){
                requirements=requirements+1;
                $(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
                $('#requirement-div').after(container);
            }
        });

    });
</script>

Answer 5

我写了一个脚本here (Adding html elements dynamically using jquery)，您可以对其进行测试

    <form action="#" method="post">
        <div class="form-group">
          <input type="text" class="form-control test" placeholder="Your Name" name="Course name" required="">
        </div>
        <div class="form-group">
          <input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
        </div>
        <div class="styled-input">
            <input type="button" class="btn btn-primary" value="Add Requirements" id="add-req">
            <input type="submit" class="btn btn-primary" value="Submit">
        </div>
    </form>

jQuery代码 $（function（）{ var requirements = 0;

    $('#add-req').click(function(e){
      e.preventDefault();
      $('.test').val('Okay');
      if(requirements <= 15) {
        $('.styled-input').prepend('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
        requirements++;
      } else {
        alert('Max requirement has been reached');
      }
    });
});

jQuery：使用jquery

5 个答案: