javascript 在新行 (html) 中动态添加更多文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12224823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add more text fields dynamically in new line (html)
提问by user1397595
I used code from http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/html-javascript/ .my code is this:
我使用了来自http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/html-javascript/ 的代码。我的代码是这样的：
<HTML>
<HEAD>
<TITLE>Dynamically add Textbox, Radio, Button in html Form using JavaScript</TITLE>
<SCRIPT language="javascript">
function add() {
for (i=1; i<=5; i++)
{
???? //Create an input type dynamically.
???? var element = document.createElement("input");
?
???? //Assign different attributes to the element.
???? element.setAttribute("type", i);
???? element.setAttribute("name", i);
???? element.setAttribute("value", i);
?
?
??? ?var foo = document.getElementById("fooBar");
?
???? //Append the element in page (in span).
???? foo.appendChild(element);
}
?
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<H2>Dynamically add element in form.</H2>
Select the element and hit Add to add it in form.
<BR/>
<INPUT type="button" value="Add" onclick="add()"/>
?
<span id="fooBar"> </span>
?
</FORM>
</BODY>
</HTML>
That code works. But instead of adding it horizontally, I want every new text field added in a new line. I've tried to use </script><br/><script>, <html><br/></html>, document.write("\n"), and document.write("\r\n")in the loop function but it doesnt work like what I want. What should I do?
该代码有效。但不是水平添加它，我希望将每个新文本字段添加到新行中。我尝试在循环函数中使用</script><br/><script>, <html><br/></html>, document.write("\n"), 和document.write("\r\n")，但它不像我想要的那样工作。我该怎么办？
回答by McGarnagle
Why not just do this?
为什么不这样做呢？
var br = document.createElement("br");
foo.appendChild(br);
回答by nicowernli
You can change the display style of the inputs.
您可以更改输入的显示样式。
function add() {
for (i=1; i<=5; i++)
{
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", i);
element.setAttribute("name", i);
element.setAttribute("value", i);
element.style.display = "block";
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
}
Good Luck! I recommend you start using jQuery for your javascript tasks.
祝你好运！我建议您开始使用 jQuery 来处理您的 javascript 任务。
回答by Yograj Gupta
You can try, adding a new br element after input element.
您可以尝试，在 input 元素之后添加一个新的 br 元素。
for (i=1; i<=5; i++)
{
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", i);
element.setAttribute("name", i);
element.setAttribute("value", i);
var brElement = document.createElement("br");
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
foo.appendChild(brElement );
}
回答by Hazem Salama
You can just simply add this to your css
你可以简单地将它添加到你的 css 中
input{display:block;}
