¿Cómo puedo agregar un elemento después de otro elemento?

174

Tengo un cierto cuadro de texto y quiero agregar un div después de él. He probado la .append()función, pero eso solo agrega el div en el elemento.

Por ejemplo, tengo:

<input type="text" id="bla" />

y quiero cambiar eso en:

<input type="text" id="bla" /><div id="space"></div>
skerit
fuente

Respuestas:

289

intente usar el after()método:

$('#bla').after('<div id="space"></div>');

Documentación

Serbal
fuente
8
Los métodos .after () y .insertAfter () realizan la misma tarea.
Rifat
77
Eso es correcto, pero depende de la forma en que prefiera codificarlo. Normalmente ya tengo seleccionada la entrada '#bla' y luego agrego el contenido adicional. Sin embargo, por pura preferencia, no estoy seguro de si alguno de los métodos tiene un beneficio de velocidad.
Rowan
37

tratar

.insertAfter()

aquí

$(content).insertAfter('#bla');
Rifat
fuente
17
¿No debería ser su código más parecido $('<div id="space"></div>').insertAfter('#bla')que un $('#bla').insertAfter(content);?
Rowan
6

En primer lugar, el inputelemento no debe tener una etiqueta de cierre (de http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT : : prohibido).

En segundo lugar, necesitas la función after(), no append().

naivistas
fuente
Correcto, pero eso es lo que sucede cuando intento la función .append ().
skerit
2
Si es XHTML, entonces el elemento de entrada debe estar cerrado (pero no con una etiqueta final).
CiscoIPPhone
2
En HTML4 <input>no se debe cerrar.
Derek 朕 會 功夫
1

JQuery resuelto: Agregar elemento después de otro elemento

<script>
$( "p" ).append( "<strong>Hello</strong>" );
</script>

O

<script type="text/javascript"> 
jQuery(document).ready(function(){
jQuery ( ".sidebar_cart" ) .append( "<a href='http://#'>Continue Shopping</a>" );
});
</script>
Ashar Zafar
fuente
2
Esto es incorrecto. Esto agrega el elemento dentro del elemento padre, al igual que el OP establecido. Considere leer la pregunta nuevamente y revisar su respuesta.
Evan Wieland