フォーム内でdivを使用できないので、ページをリロードしたりフォームを書き換えたりせずに、フォームの中央に新しいフィールドを追加するにはどうすればよいでしょうか(また、ここで.append()
を使用できません)。 (jQueryを使用)
編集:これは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>
このスレッドを混乱させていると思われるのは、次の違いです。
$('.selector').append("<input type='text'/>");
ターゲット要素を.selectorの子として追加します。
そして
$("<input type='text' />").appendTo('.selector');
ターゲット要素を.selectorの子として追加します。
さまざまな方法を使用すると、ターゲット要素と.selectorの位置がどのように変化するかに注意してください。
あなたがしたいことはこれです:
$(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
});
これにより、ID「password」を持つ入力フィールドの後に新しい要素が挿入されます。
$(document).ready(function(){
var newInput = $("<input name='new_field' type='text'>");
$('input#password').after(newInput);
});
これが質問に答えるかどうかはわかりません。
append
やappendTo
などのメソッドを使用して、あらゆるタイプのHTMLを追加できます。
例:
$('form#someform').append('<input type="text" name="something" id="something" />');
そのようなものがうまくいくかもしれません:
<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>
ChromeのFORMに追加するフレームセットIDを使用するappendToにはバグがあるようです。属性タイプをdivと直接スワップアウトし、機能します。