使用 jQuery 动态添加 HTML 表单字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6099301/
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
Dynamically adding HTML form field using jQuery
提问by ilyo
Since I cant use div inside forms, I wonder how can I add new field in the middle of the form (and I can't use .append()here) without reloading the page or rewriting the form? (using jQuery)
由于我不能在表单中使用 div，我想知道如何.append()在不重新加载页面或重写表单的情况下在表单中间添加新字段（我不能在这里使用）？（使用jQuery）
EDIT: this is the HTML:
编辑：这是 HTML：
<form id="form-0" name="0">
<b>what is bla?</b><br>
<input type="radio" name="answerN" value="0"> aaa <br>
<input type="radio" name="answerN" value="1"> bbb <br>
<input type="radio" name="answerN" value="2"> ccc <br>
<input type="radio" name="answerN" value="3"> ddd <br>
//This is where I want to dynamically add the new radio or text line
<input type="submit" value="Submit your answer">
//but HERE is where .append() will put it!
</form>
回答by thastark
What seems to be confusing this thread is the difference between:
这个线程似乎令人困惑的是以下之间的区别：
$('.selector').append("<input type='text'/>");
Which appends the target element as a child of the .selector.
它将目标元素附加为 .selector 的子元素。
And
和
$("<input type='text' />").appendTo('.selector');
Which appends the target element as a child of the .selector.
它将目标元素附加为 .selector 的子元素。
Note how the position of the target element & the .selector change when using the different methods.
请注意使用不同方法时目标元素和 .selector 的位置如何变化。
What you want to do is this:
你想要做的是：
$(function() {
// append input control at start of form
$("<input type='text' value='' />")
.attr("id", "myfieldid")
.attr("name", "myfieldid")
.prependTo("#form-0");
// OR
// append input control at end of form
$("<input type='text' value='' />")
.attr("id", "myfieldid")
.attr("name", "myfieldid")
.appendTo("#form-0");
// OR
// see .after() or .before() in the api.jquery.com library
});
回答by Fredrik
This will insert a new element after the input field with id "password".
这将在 ID 为“password”的输入字段后插入一个新元素。
$(document).ready(function(){
var newInput = $("<input name='new_field' type='text'>");
$('input#password').after(newInput);
});
Not sure if this answers your question.
不确定这是否回答了您的问题。
回答by Rob
You can add any type of HTML with methods like appendand appendTo(among others):
您可以使用append和appendTo（以及其他）方法添加任何类型的 HTML ：
Example:
例子：
$('form#someform').append('<input type="text" name="something" id="something" />');
回答by pixelbobby
something like so might work:
像这样的事情可能会奏效：
<script type="text/javascript">
$(document).ready(function(){
var $input = $("<input name='myField' type='text'>");
$('#section2').append($input);
});
</script>
<form>
<div id="section1"><!-- some controls--></div>
<div id="section2"><!-- for dynamic controls--></div>
</form>
回答by Datadimension
There appears to be a bug with appendTo using a frameset ID appending to a FORM in Chrome. Swapped out the attribute type directly with div and it works.
appendTo 在 Chrome 中使用附加到表单的框架集 ID 似乎存在错误。直接用 div 换出属性类型，它的工作原理。
