браузер не показывает динамически вставленные divs последовательно

Question

Я пытался добавить несколько строк и добавить их в один существующий div, используя javascript. Но браузер просто показал их на мгновение, а затем ушел. Я не понимаю, что происходит. Как решить эту проблему?

Это мой код.

var i = 2;    // i is global 
    function addNewItem() 
    { 
     var rowDiv = document.createElement('div'); 
     rowDiv.id = "row" + toString(i); 
     rowDiv.className = 'col-md-12 container-fluid row text-justify'; 

     var selectDiv = document.createElement('select'); 

     selectDiv.id = "myList" + toString(i); 
     selectDiv.name = "itemlist" + toString(i); 
     var optionDiv1 = document.createElement('option'); 
     optionDiv1.value = 'None'; 
     var t1 = document.createTextNode("Select Items"); 
     optionDiv1.appendChild(t1); 
     var optionDiv2 = document.createElement('option'); 
     optionDiv2.value = 'soap'; 
     var t2 = document.createTextNode("Soap"); 
     optionDiv2.appendChild(t2); 
     var optionDiv3 = document.createElement('option'); 
     optionDiv3.value = 'detergent'; 
     var t3 = document.createTextNode("Detergent"); 
     optionDiv3.appendChild(t3); 
     var optionDiv4 = document.createElement('option'); 
     optionDiv4.value = 'handwash'; 
     var t4 = document.createTextNode("Handwash"); 
     optionDiv4.appendChild(t4); 
     selectDiv.appendChild(optionDiv1); 
     selectDiv.appendChild(optionDiv2); 
     selectDiv.appendChild(optionDiv3); 
     selectDiv.appendChild(optionDiv4); 

     var unitDiv = document.createElement('div'); 
     unitDiv.className = 'form-group col-md-2 text-center'; 
     var pUnit = document.createElement('p'); 
     pUnit.className = 'form-control text-right'; 
     pUnit.id = "unit" + toString(i); 
     unitDiv.appendChild(pUnit); 

     var rateDiv = document.createElement('div'); 
     rateDiv.className = 'form-group col-md-2 text-center'; 
     var pRate = document.createElement('p'); 
     pRate.className = 'form-control text-right'; 
     pRate.id = "rate" + toString(i); 
     rateDiv.appendChild(pRate); 

     var qtyDiv = document.createElement('div'); 
     qtyDiv.className = 'form-group col-md-2 text-center'; 
     var pQty = document.createElement('input'); 
     pQty.className = 'form-control text-right'; 
     pQty.type = 'number'; 
     pQty.id = "qty" + toString(i); 
     //pQty.placeholder = '0'; 
     qtyDiv.appendChild(pQty); 

     var amtDiv = document.createElement('div'); 
     amtDiv.className = 'form-group col-md-3 text-center'; 
     var pAmt = document.createElement('p'); 
     pAmt.className = 'form-control text-right'; 
     amtDiv.id = "amt" + toString(i); 
     amtDiv.appendChild(pAmt); 
     selectDiv.className = 'col-md-12 form-control'; 
     rowDiv.appendChild(selectDiv); 
     rowDiv.appendChild(unitDiv); 
     rowDiv.appendChild(rateDiv); 
     rowDiv.appendChild(qtyDiv); 
     rowDiv.appendChild(amtDiv); 

     var form = document.getElementById("main-form"); // Get the <form> element to insert a new node 
     form.insertBefore(rowDiv, form.childNodes[i-1]); 
     console.log(i); 
     i = i + 1; 
     console.log(i); 
    } 

И это html-строки, которые я использую.

<div class="section"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <form role="form" method="post" id="main-form" action=""> 
         <div class="col-md-12 container-fluid row text-center"> 
          <div class="form-group col-md-3"> 
           <label class="" for="myList">*Item Name</label> 
           <br> 
           <select class="col-md-12 form-control" id="myList1" name="itemlist1" onChange="setItemUnit();showAmount();"> 
            <option value="None">Select Items<br></option> 
            <option value="soap">Soap</option> 
            <option value="detergent">Detergent</option> 
            <option value="handwash">Hand Wash</option> 
            <option value="wire">Wire</option> 
           </select> 
          </div> 
          <div class="form-group col-md-2 text-center"> 
           <label class="" for="unit1">UOM</label> 
           <p class="form-control text-right" id="unit1">NA</p> 
          </div> 
          <div class="form-group col-md-2 text-center"> 
           <label class="control-label" for="rate1">*Rate/Unit</label> 
           <p class="form-control text-right" id="rate1">0</p> 
          </div> 
          <div class="form-group col-md-2 text-center"> 
           <label class="control-label" for="qty1">*Ordered Qty</label> 
           <input class="form-control text-right" id="qty1" placeholder="0" type="number" onChange="showAmount();"> 
          </div> 
          <div class="form-group col-md-3 text-center"> 
           <label class="control-label" for="amt1">*Amount(Rs.)</label> 
           <p class="form-control text-right" id="amt1"></p> 
          </div> 
         </div> 
         <div class="col-md-12 container-fluid row text-justify"> 
          <div class="form-group col-md-3"> 
           <select class="col-md-12 form-control" id="myList2" name="itemlist2" onChange="setItemUnit2();showAmount();"> 
            <option value="None">Select Items</option> 
            <option value="soap">Soap</option> 
            <option value="detergent">Detergent</option> 
            <option value="handwash">Hand Wash</option> 
            <option value="wire">Wire</option> 
           </select> 
          </div> 
          <div class="form-group col-md-2 text-center"> 
           <p class="form-control text-right" id="unit2">NA</p> 
          </div> 
          <div class="form-group col-md-2 text-center"> 
           <p class="form-control text-right" id="rate2">0</p> 
          </div> 
          <div class="form-group col-md-2 text-center"> 
           <input class="form-control text-right" id="qty2" placeholder="0" type="number" onChange="showAmount();"> 
          </div> 
          <div class="form-group col-md-3 text-center"> 
           <p class="form-control text-right" id="amt2"></p> 
          </div> 
         </div> 
         <div class="col-md-12 container-fluid row text-justify"> 
          <div class="form-group col-md-3"> 
           <select class="col-md-12 form-control" id="myList3" name="itemlist3" onChange="setItemUnit3();showAmount();"> 
            <option value="None">Select Items</option> 
            <option value="soap">Soap</option> 
            <option value="detergent">Detergent</option> 
            <option value="handwash">Hand Wash</option> 
            <option value="wire">Wire</option> 
           </select> 
          </div> 
          <div class="form-group col-md-2 text-center"> 
           <p class="form-control text-right" id="unit3">NA</p> 
          </div> 
          <div class="form-group col-md-2 text-center"> 
           <p class="form-control text-right" id="rate3">0</p> 
          </div> 
          <div class="form-group col-md-2 text-center"> 
           <input class="form-control text-right" id="qty3" placeholder="0" type="number" onChange="showAmount();"> 
          </div> 
          <div class="form-group col-md-3 text-center"> 
           <p class="form-control text-right" id="amt3"></p> 
          </div> 
         </div> 

         <div class="col-md-12 container-fluid row text-justify" id="adder"> 
          <div class="form-group col-md-12"> 
           <button class="btn btn-block btn-primary" onclick="addNewItem();">Add more Items+</button> 
          </div> 
         </div> 

         <div class="col-md-12 container-fluid row text-justify"> 
          <div class="form-group col-md-2 col-md-offset-7 text-center"> 
           <label class="control-label text-primary" for="">*Total Qty</label> 
           <p class="form-control text-right" name="qty-total" id="qty-total"></p> 
           <!--<a class="btn btn-info btn-block"><p name="qty-total" id="qty-total"></p></a>--> 
          </div> 
          <div class="form-group col-md-2 text-center"> 
           <label class="control-label text-primary" for="amt-total">*Total Amount(Rs.)Σ</label> 
           <p class="form-control text-right" name="amt-total" id="amt-total"></p> 
           <!--<a class="btn btn-info btn-block"><p name="amt-total" id="amt-total"></p></a>--> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Вы должны добавить "toptionDiv1" первым в существующий DOM элемента. Здесь:

var optionDiv1 = document.createElement('option'); 

Попробуйте это: document.body.appendChild(optionDiv1);

Answer 2

Я бы перешагнул код в браузере и посмотрел, какая строка заставляет div исчезнуть. Это, вероятно, даст вам понять, что случилось.

Answer 3

Привет, я внесли некоторые изменения, изменил эту кнопку, чтобы ввести тип, удалить onclick, добавить id и заданную функцию jquery.

 var i =2; 
    $("#addmore").click(function(){ 
    var rowDiv = document.createElement('div'); 
    rowDiv.id = "row" + toString(i); 
    rowDiv.className = 'col-md-12 container-fluid row text-justify'; 

    var selectDiv = document.createElement('select'); 

    selectDiv.id = "myList" + toString(i); 
    selectDiv.name = "itemlist" + toString(i); 
    var optionDiv1 = document.createElement('option'); 
    optionDiv1.value = 'None'; 
    var t1 = document.createTextNode("Select Items"); 
    optionDiv1.appendChild(t1); 
    var optionDiv2 = document.createElement('option'); 
    optionDiv2.value = 'soap'; 
    var t2 = document.createTextNode("Soap"); 
    optionDiv2.appendChild(t2); 
    var optionDiv3 = document.createElement('option'); 
    optionDiv3.value = 'detergent'; 
    var t3 = document.createTextNode("Detergent"); 
    optionDiv3.appendChild(t3); 
    var optionDiv4 = document.createElement('option'); 
    optionDiv4.value = 'handwash'; 
    var t4 = document.createTextNode("Handwash"); 
    optionDiv4.appendChild(t4); 
    selectDiv.appendChild(optionDiv1); 
    selectDiv.appendChild(optionDiv2); 
    selectDiv.appendChild(optionDiv3); 
    selectDiv.appendChild(optionDiv4); 

    var unitDiv = document.createElement('div'); 
    unitDiv.className = 'form-group col-md-2 text-center'; 
    var pUnit = document.createElement('p'); 
    pUnit.className = 'form-control text-right'; 
    pUnit.id = "unit" + toString(i); 
    unitDiv.appendChild(pUnit); 

    var rateDiv = document.createElement('div'); 
    rateDiv.className = 'form-group col-md-2 text-center'; 
    var pRate = document.createElement('p'); 
    pRate.className = 'form-control text-right'; 
    pRate.id = "rate" + toString(i); 
    rateDiv.appendChild(pRate); 

    var qtyDiv = document.createElement('div'); 
    qtyDiv.className = 'form-group col-md-2 text-center'; 
    var pQty = document.createElement('input'); 
    pQty.className = 'form-control text-right'; 
    pQty.type = 'number'; 
    pQty.id = "qty" + toString(i); 
    //pQty.placeholder = '0'; 
    qtyDiv.appendChild(pQty); 

    var amtDiv = document.createElement('div'); 
    amtDiv.className = 'form-group col-md-3 text-center'; 
    var pAmt = document.createElement('p'); 
    pAmt.className = 'form-control text-right'; 
    amtDiv.id = "amt" + toString(i); 
    amtDiv.appendChild(pAmt); 
    selectDiv.className = 'col-md-12 form-control'; 
    rowDiv.appendChild(selectDiv); 
    rowDiv.appendChild(unitDiv); 
    rowDiv.appendChild(rateDiv); 
    rowDiv.appendChild(qtyDiv); 
    rowDiv.appendChild(amtDiv); 

    var form = document.getElementById("main-form"); // Get the <form> element to insert a new node 
    form.insertBefore(rowDiv, form.childNodes[i-1]); 
    console.log(i); 
    i = i + 1; 
    console.log(i); 
    }); 

и здесь HTML-

<div class="section"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <form role="form" method="post" id="main-form" action=""> 
        <div class="col-md-12 container-fluid row text-center"> 
         <div class="form-group col-md-3"> 
          <label class="" for="myList">*Item Name</label> 
          <br> 
          <select class="col-md-12 form-control" id="myList1" name="itemlist1" onChange="setItemUnit();showAmount();"> 
           <option value="None">Select Items<br></option> 
           <option value="soap">Soap</option> 
           <option value="detergent">Detergent</option> 
           <option value="handwash">Hand Wash</option> 
           <option value="wire">Wire</option> 
          </select> 
         </div> 
         <div class="form-group col-md-2 text-center"> 
          <label class="" for="unit1">UOM</label> 
          <p class="form-control text-right" id="unit1">NA</p> 
         </div> 
         <div class="form-group col-md-2 text-center"> 
          <label class="control-label" for="rate1">*Rate/Unit</label> 
          <p class="form-control text-right" id="rate1">0</p> 
         </div> 
         <div class="form-group col-md-2 text-center"> 
          <label class="control-label" for="qty1">*Ordered Qty</label> 
          <input class="form-control text-right" id="qty1" placeholder="0" type="number" onChange="showAmount();"> 
         </div> 
         <div class="form-group col-md-3 text-center"> 
          <label class="control-label" for="amt1">*Amount(Rs.)</label> 
          <p class="form-control text-right" id="amt1"></p> 
         </div> 
        </div> 
        <div class="col-md-12 container-fluid row text-justify"> 
         <div class="form-group col-md-3"> 
          <select class="col-md-12 form-control" id="myList2" name="itemlist2" onChange="setItemUnit2();showAmount();"> 
           <option value="None">Select Items</option> 
           <option value="soap">Soap</option> 
           <option value="detergent">Detergent</option> 
           <option value="handwash">Hand Wash</option> 
           <option value="wire">Wire</option> 
          </select> 
         </div> 
         <div class="form-group col-md-2 text-center"> 
          <p class="form-control text-right" id="unit2">NA</p> 
         </div> 
         <div class="form-group col-md-2 text-center"> 
          <p class="form-control text-right" id="rate2">0</p> 
         </div> 
         <div class="form-group col-md-2 text-center"> 
          <input class="form-control text-right" id="qty2" placeholder="0" type="number" onChange="showAmount();"> 
         </div> 
         <div class="form-group col-md-3 text-center"> 
          <p class="form-control text-right" id="amt2"></p> 
         </div> 
        </div> 
        <div class="col-md-12 container-fluid row text-justify"> 
         <div class="form-group col-md-3"> 
          <select class="col-md-12 form-control" id="myList3" name="itemlist3" onChange="setItemUnit3();showAmount();"> 
           <option value="None">Select Items</option> 
           <option value="soap">Soap</option> 
           <option value="detergent">Detergent</option> 
           <option value="handwash">Hand Wash</option> 
           <option value="wire">Wire</option> 
          </select> 
         </div> 
         <div class="form-group col-md-2 text-center"> 
          <p class="form-control text-right" id="unit3">NA</p> 
         </div> 
         <div class="form-group col-md-2 text-center"> 
          <p class="form-control text-right" id="rate3">0</p> 
         </div> 
         <div class="form-group col-md-2 text-center"> 
          <input class="form-control text-right" id="qty3" placeholder="0" type="number" onChange="showAmount();"> 
         </div> 
         <div class="form-group col-md-3 text-center"> 
          <p class="form-control text-right" id="amt3"></p> 
         </div> 
        </div> 

        <div class="col-md-12 container-fluid row text-justify" id="adder"> 
         <div class="form-group col-md-12"> 
          <input type='button' class="btn btn-block" id="addmore" value="AddMoreItem"/> 
         </div> 
        </div> 

        <div class="col-md-12 container-fluid row text-justify"> 
         <div class="form-group col-md-2 col-md-offset-7 text-center"> 
          <label class="control-label text-primary" for="">*Total Qty</label> 
          <p class="form-control text-right" name="qty-total" id="qty-total"></p> 
          <!--<a class="btn btn-info btn-block"><p name="qty-total" id="qty-total"></p></a>--> 
         </div> 
         <div class="form-group col-md-2 text-center"> 
          <label class="control-label text-primary" for="amt-total">*Total Amount(Rs.)Σ</label> 
          <p class="form-control text-right" name="amt-total" id="amt-total"></p> 
          <!--<a class="btn btn-info btn-block"><p name="amt-total" id="amt-total"></p></a>--> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 

Checkout этой https://jsfiddle.net/3b7jjtvt/