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:

Sintaxis de jQuery prepend()

Veamos la sintaxis extraída de su web oficial:

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

1	$(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.");
	}); 
});

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

Inicio del párrafo.<br>

<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 + ".";
        	});
    	}); 
});

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