jQuery: Adding html elements dynamically using jquery

Question

I want to add some html elements dynamically using jQuery inside a form tag but it is not working .

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

when I click add requirement button it should create another div tag and input element inside form element.

Answer 1

Just replace the code $(document.createElement('div').addClass('form-group')); to $(document.createElement('div')).addClass('form-group') ;

Answer 2

Try the following

We can directly Insert a html element to the targer Element as follow

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

you mixing between JS and JQuery, where document.createElemet('div') is a JS function while addClass is a JQuery function.

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

Replace the Below Code

<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

I wrote a script here (Adding html elements dynamically using jquery) that you can test

    <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 Code $(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');
      }
    });
});