jQuery before(): Añadir elementos por delante de otros

Vamos a repasar la función de jQuery before(), su funcionalidad es la de añadir elementos por delante de otros ya existentes dentro del DOM de una página web.

Otras funciones de jQuery similares son:

• prepend()
• append()
• html()
• text()
• after()

Sintaxis de jQuery before()

Veamos la sintaxis extraída de su web oficial:

$(selector).before(contenido,function(index));

Os explico la sintaxis superior:

• selector (Obligatorio): Elemento selector en el cual se inserta el contenido justo delante..
• 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 funcionalidad:

$(document).ready(function(){
    $("#boton").click(function(){
     $("#parrafo1").before("<p>Este párrafo y su texto tienen que salir antes del párrafo</p>");
    }); 
});

Os explico el ejemplo:

• Detectamos el click en el elemento con id = ‘boton’.
• Después con before() insertamos un párrafo y texto por delante del párrafo 1.

El código HTML del párrafo 1 y el botón es el siguiente:

<input type="button" id="boton" value="Añadir párrafo y texto antes del párrafo 1">
<br><br>

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