0

我正在使用简单的方法 makeInput() 动态创建 HTML 表单，并且想知道如何使文本输入框每行显示一个，而不是以从右到左的方式显示。截至目前，当您单击“添加课程”按钮时，它会在旧文本输入旁边而不是在新行上添加一个新文本输入。这是我到目前为止的代码：

<html>
<head>COURSES</head>
<title>Add Courses</title>
<script type="text/javascript">
var x = 0;
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"tron.php");
f.id = "form1";
var s = document.createElement("input"); //input element, Submit button
s.setAttribute('type',"submit");
s.setAttribute('value',"Submit Courses");
f.appendChild(s);
function makeInput()
{

var i = document.createElement("input");
i.type = "text";
i.name = "cname"+ x;
i.id = "cname"+ x;

f.appendChild(i);
document.getElementById("test").appendChild(f);

x = x+1;
document.getElementById("course").innerHTML= "Number of courses: " + x;
}

</script>
<body>
<p id="course">Number of courses: </p>
<button onclick="makeInput()">Add Course</button>
<p id="test"></p>


</body>
</html>
4

2 回答 2

0

我通常围绕 html 表单动态创建 div 和/或 span，以便您也可以将 css 应用于它们。如果您将输入框放在 div 中，则它们应该一次排一行，除非您专门添加 css 来做其他事情。

于 2013-04-24T02:51:25.067 回答
0

只是将评论作为答案。

改变

document.getElementById("test").appendChild(f);

到以下

document.getElementById("test").appendChild(f).innerHTML += '<br />';

这是小提琴：http: //jsfiddle.net/UR4y7/

于 2013-04-24T02:55:20.220 回答