JQuery: Obtener o agregar texto a elementos con .text()

octubre 29, 2014

Muchas son las veces que deseamos obtener o agregar texto a determinada tarea en nuestro HTML o DOM, bueno hoy veremos un método para poder hacer estas 2 cosas con la función .text() de Jquery, manos al código!

Código Jquery para obtener texto

<script>
$(function(){
	$("#boton").click(function(){
		alert($("p").text());
	});
});
</script>

Explicación:
$(‘#boton’).click: cuando se detecte un clic en el botón se ejecutara la extracción del texto.
alert($(«p»).text()): alerta que saltara tras a ver echo clic al botón. con el texto obtenido.
Nota: recuerda que esta función captura también lo hijos del Párrafo como lo puedes ver en el html

Código HTML

<p>
	Hola soy un parrafo cualquier. <b>yo soy una negrita dentro de un Párrafo</b>
</p>
<button id="boton">Obtener Texto</button>

Como siempre dejo la Demo mas la descarga de los archivo, Password: Antocas.com


Código Jquery para agregar o Asignar texto

Ahora utilizaremos la misma función .text() de Jquery, pero ahora vamos a cambiar el texto.

<script>
$(function(){
	$("#boton").click(function(){
		$("p").text('¡ Hey! soy un Parrafo o texto sustituto me acaban de agregar :D');
	});
});
</script>

Explicación:
$(«#boton»).click: cuando se detecte el click se asignara el texto.
$(«p»).text(‘¡ Hey! soy un Parrafo o texto sustituto me acaban de agregar :D’): selección del nodo(«p») y agregamos con .text().

Código HTML

<p>
	Hola soy un parrafo y si das clic <b>me sustituiran.</b>
</p>
<button id="boton">Agregar Texto</button>

Como siempre dejo la Demo mas la descarga de los archivo, Password: Antocas.com

Relacionados