我试图添加一些行并使用javascript将它们附加到一个现有的div。但浏览器只是暂时显示它们然后消失了。我不明白发生了什么。如何解决这个问题？
这是我的代码。
<ons-tabbar modifier="material">
<ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
<ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
<ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<ons-toolbar>
<div class="center">Home</div>
</ons-toolbar>
<p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>
<ons-template id="comments.html">
<ons-toolbar>
<div class="center">Comments</div>
</ons-toolbar>
<p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>
<ons-template id="tags.html">
<ons-toolbar>
<div class="center">Tags</div>
</ons-toolbar>
<p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>
<ons-template id="feed.html">
<ons-toolbar>
<div class="center">Feed</div>
</ons-toolbar>
<p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>
<ons-template id="settings.html">
<ons-toolbar>
<div class="center">Settings</div>
</ons-toolbar>
<p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>
这是我正在使用的HTML行。
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);
}
答案 0 :(得分：0)
您好我做了一些更改，更改了按钮输入类型，删除了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>
答案 1 :(得分：0)
您需要先将“toptionDiv1”附加到现有DOM元素。这里：
var optionDiv1 = document.createElement('option');
试试这个：
document.body.appendChild(optionDiv1);
答案 2 :(得分：-1)
我会逐步浏览浏览器中的代码并查看哪一行使div消失。这可能会给你一个关于错误的线索。