jQuery prepend(): Añadir o insertar contenido al comienzo de un elemento

Repaso a la función de jQuery prepend() que tiene como funcionalidad añadir o insertar contenido al comienzo del elemento seleccionado. El caso opuesto lo tenemos con append() que añade contenido al final.

Otras funciones de jQuery interesantes que puedan ser de utilidad son:

• after() y before()
• each() y animate()
• position() y offset()
• remove() y empty()

Sintaxis de jQuery prepend()

Veamos la sintaxis extraída de su web oficial:

$(selector).prepend(contenido, funcion(index,html))

Repasemos los parámetros disponibles:

• selector (Obligatorio): Elemento selector en el que hay que insertar el contenido al principio del mismo.
• contenido (Obligatorio): Contenido a insertar. Pudiendo ser objetos jQuery, HTML, texto…
• index: Devuelve la posición del elemento selector en caso de haber varios del mismo tipo.
• html: Devuelve el código HTML del elemento selector.

Ejemplo de jQuery prepend() para añadir texto al final de un párrafo

Vayamos con un primer ejemplo de prepend() para verlo en funcionamiento:

$(document).ready(function(){
        $("#boton").click(function(){
      $("#parrafo").prepend("<br>Texto añadido al comienzo del párrafo.");
 }); 
});

Os explico el ejempo:

• Detectamos el click en el botón con id=»boton».
• En el elemento con id=»parrafo» añadimos con prepend() un texto.

El código HTML del ejemplo es el siguiente:

<p id="parrafo">
 Inicio del párrafo.<br>
 <input type="button" id="boton" value="Añadir texto al comienzo del párrafo">
 <br>
 Final del párrafo
</p>

Ejemplo de jQuery prepend() usando una función

En este segundo ejemplo de prepend() vamos a usar una función para añadir contenido al final cada elemento de una lista:

$(document).ready(function(){
        $("#boton").click(function(){
         $("ul#listas li").prepend(function(n){
                 return "--> Este elemento de la lista tiene el índice: " + n + ".";
         });
     }); 
});

Os explico este segundo ejemplo

• Detectamos el click en el botón con id=»boton».
• En la lista con id=»listas» añadimos con prepend() un texto al comienzo de cada elemento indicando su número de índice mediante una función.

El código HTML del segundo ejemplo es el siguiente:

<p id="parrafo">
 <ul id="listas">
    <li>Elemento lista 1</li>
    <li>Elemento lista 2</li>
    <li>Elemento lista 3</li>
 </ul>
 <input type="button" id="boton" value="Añadir elemento al comienzo de cada elemento de la lista">
</p>