使用for循环创建html元素
使用for循环创建html元素
提问于 2016-08-16 21:47:59
我的密码怎么了？它应该使用传入数字(数量)在html中创建输入标记：
// Declare variables
var numberOfGrades = 0;
var NL = "\n";
// Functions
function setQuantity() {
numberOfGrades = document.getElementById("quantity").value;
var inputBox = document.createElement("INPUT");
var BR = document.createElement("br"); // Break line
var gradeNumber = 1;
var gradeText = document.createTextNode("Grade " + gradeNumber + ":");
for (var i = 0; i < numberOfGrades; i++) {
alert(numberOfGrades);
document.getElementById("formDiv").appendChild(BR);
document.getElementById("formDiv").appendChild(gradeText);
document.getElementById("formDiv").appendChild(inputBox);
gradeNumber++;
}
}body {
font-family: "Open Sans", sans-serif;
}
.container {
width: 100%;
background-color: lightcyan;
padding: 10px;
}<body>
<h1>Homework and Quiz average calculator</h1>
<p>Please Enter the required information to calcuate</p>
<div class="container" id="formDiv">
<form id="formID">
<p>
<strong>Calculate the average of homework grades</strong>
</p>
How many grades?
<input type="number" id="quantity" name="quantity" min="1" max="10" value="1">
<!--<input onclick="setQuantity()" type="submit" value="Apply">-->
</form>
<button onclick="setQuantity()">APPLY</button>
<br>
</div>
<script src="script.js"></script>
</body>
Stack Overflow用户
回答已采纳
发布于 2016-08-16 21:50:38
当您调用x.appendChild(y)时，节点y作为子节点添加到x 中，如果已经在DOM中，则将其从原来的位置删除。
例如：
var x = document.createElement("div");
var y = document.createElement("div");
var z = document.createElement("div");
x.appendChild(y);
z.appendChild(y); // now y is not inside x any more, was **moved** to z如果您想要有多个节点，则需要在循环中创建它们。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38985006
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号