jQuery after(): Añadir elementos después de otro elemento

Nuevo post para repasar la función de jQuery after(), su funcionalidad es la de añadir elementos después de otro elemento indicado dentro del DOM de una página web.

Otras funciones de jQuery similares son:

• prepend()
• append()
• html()
• text()
• before()

Sintaxis de jQuery after()

Veamos la sintaxis extraída de su web oficial:

$(selector).after(contenido,function(indice))

Os explico la sintaxis superior:

• selector (Obligatorio): Elemento selector después del cual se inserta el contenido.
• contenido (Obligatorio): Contenido a insertar, pudiendo ser un objeto jQuery, código HTML o elementos del DOM.
• function (indice): Función que devuelve el contenido a insertar, el valor indice devuelve la posición del elemento.

Ejemplo de jQuery after()

Veamos en este ejemplo de after() su funcionamiento:

$(document).ready(function(){
    $("#boton").click(function(){
     $("#parrafo1").after("<p>Este párrafo tiene que salir entre el párrafo 1 y 2</p>");
 }); 
});

Os explico el ejemplo:

• Detectamos el click en el elemento con id = ‘boton’.
• Después con after() insertamos un párrafo entre el párrafo 1 y 2.

El código HTML de los párrafos y el botón es el siguiente:

<input type="button" id="boton" value="Añadir texto después del párrafo 1">

<p id="parrafo1">
 Inicio del párrafo 1.<br>
 Final del párrafo 1.
</p>

<p id="parrafo2">
 Inicio del párrafo 2.<br>
 Final del párrafo 2.
</p>