Appending div inside 'form' not working

Question

I'm try to append 'div' element and its content inside an another 'div' but that's not working inside 'form' tag, outside its working fine ..

<form id="myForm">
            <div id ="wrapfields" class="input_fields_wrap">
            <div class="col-md-12 form-group">
                <button style ="margin-left:1%;"class="btn btn-success"onclick="Addelemt()">+</button>
            </div>
            <div>
                    <div class="col-md-6 form-group">
                      <label class="text-center">Add Items</label>
                      <input type="text" class="form-control" name="addItem[]" id="email">
                    </div>
                    <div class="col-md-2   form-group">
                      <label>Price</label>
                      <input type="text" class="form-control" name="addprice[]" id="email">
                   </div>
                   <div class="col-md-2   form-group">
                     <label>Quantity</label>
                     <input type="text" class="form-control" name="addprice[]" id="email">
                  </div>
            </div>
            <div id ="" style="margin-bottom:10px;">
            <div class="col-md-2 form-group" style="margin-left:45%;">
            <button  type ="submit" onsubmit ="return saveInputs()" name ="submit" class="btn btn-default"/>submit</button>   
            </div>
            </div>
        </div>
        </form>

and the javascript code written so far..

var counter = 0;var increment=0;

function Addelemt()
{   
var parentDiv = document.getElementById('wrapfields');  
    increment++;
    var divClass = document.createElement("div");
    divClass.setAttribute('id','divId'+increment);
    console.log(divClass);
    parentDiv.appendChild(divClass);

}

Can anyone tell me that why its not working inside 'form'???

Answer 1

So, the problem is with your html

<button style ="margin-left:1%;" class="btn btn-success" onclick="Addelemt()">+</button>

add type="button" to Add button

<button style ="margin-left:1%; "class="btn btn-success" type="button" onclick="Addelemt()">+</button>

As button inside <form> tag without type attribute is treated like Submit button, hence it refresh the page.