Динамическое добавление поля формы HTML с использованием jQuery

Question

Поскольку я не могу использовать div внутри форм, мне интересно, как я могу добавить новое поле в середине формы (и я не могу использовать .append() здесь) без перезагрузки страницы или переписывания формы? (используя jQuery)

EDIT: это 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>

Answer 1

Что, кажется, смущает эту тему - разница между:

$('.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

});

Answer 2

Будет вставлен новый элемент после поля ввода с идентификатором «пароль».

$(document).ready(function(){
  var newInput = $("<input name='new_field' type='text'>");
  $('input#password').after(newInput);
});

Не уверен, отвечает ли это на ваш вопрос.

Answer 3

Вы можете добавить любой тип HTML с помощью таких методов, как append и appendTo (среди прочих):

Методы манипуляции jQuery

Пример:

$('form#someform').append('<input type="text" name="something" id="something" />');

Answer 4

что-то вроде этого может работать:

<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>

Answer 5

Кажется, есть ошибка с appendTo при использовании идентификатора набора фреймов, добавляемого к FORM в Chrome.Поменял тип атрибута напрямую с div, и он работает.