Añadiendo dinámicamente campo de formulario HTML usando jQuery

Question

Dado que no puedo usar div dentro de formularios, me pregunto cómo puedo agregar un nuevo campo en el medio del formulario (y no puedo usar .append() aquí) sin volver a cargar la página o reescribir el formulario ? (Usando jQuery)

EDIT: este es el 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

Lo que parece estar confundiendo este hilo es la diferencia entre:

$('.selector').append("<input type='text'/>"); 

que añade el elemento de destino como hijo de la .Selector.

Y

$("<input type='text' />").appendTo('.selector'); 

que añade el elemento de destino como hijo de la .Selector.

Observe cómo cambia la posición del elemento de destino & .selector cuando se utilizan los diferentes métodos.

Lo que se quiere hacer es la siguiente:

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

Puede añadir cualquier tipo de HTML con métodos como append y appendTo (entre otros):

jQuery manipulation methods

Ejemplo:

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

Answer 3

algo así como lo que podría funcionar:

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

Esto insertará un nuevo elemento después del campo de entrada con id "contraseña".

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

No estoy seguro de si esto responde su pregunta.

Answer 5

Parece que hay un error con appendTo mediante un identificador de conjunto de marcos añadiendo a una forma en Chrome. Se ha cambiado el tipo de atributo directamente con div y funciona.