javascript - 浏览器未一致地显示动态插入的 div

Question

我试图使用 javascript 添加一些行并将它们附加到一个现有的 div 中。但浏览器只显示了它们一会儿，然后就消失了。我不明白发生了什么事。如何解决这个问题？

这是我的代码。

    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);