Categorías: jQuery

jQuery text(): Obtener o asignar el texto a elementos del DOM

Nueva entrada de jQuery donde hablaremos de la función jQuery text(), de esta manera podemos obtener o asignar el texto que queramos a los diferentes elementos del DOM.

Otras funciones parecidas en cuanto a funcionamiento son:

Sintaxis de jQuery text()

Vamos a repasar la sintaxis extraída de su web oficial:

//obtener el texto del nodo seleccionado
$(selector).text()
//Asignar texto al nodo seleccionado
$(selector).text(texto)

Os comento la sintaxis para obtener el texto:

  • selector (Obligatorio): Es el nodo del que queremos obtener el texto. Afecta también a la profundidad del nodo, es decir, que saca también el texto de los nodos hijo.

Y ahora explico la sintaxis para asignar el texto:

  • selector (Obligatorio): Es el nodo al que queremos asignar el texto.
  • texto (Obligatorio): Texto que queremos insertar en el nodo.

Tras ver las sintaxis para obtener o asignar texto vamos con los ejemplos.

Ejemplo de jQuery text() para obtener el texto de un nodo

He preparado este primer ejemplo para ver cómo obtener el texto de un nodo con jQuery.

<script>
$(document).ready(function(){
 $("#boton01").click(function(){
  alert($("#parrafo").text());
 });
});
</script>

Os comento las líneas superiores:

  • Se detecta el click del botón con id ‘boton01’.
  • Sacamos un alert por pantalla con el texto del párrafo con id ‘parrafo’.
  • Dicho párrafo contiene un nodo hijo ‘span’ del cual también sacamos el texto.

El código HTML del párrafo y botones es el siguiente:

<p id="parrafo">Este es un texto dentro de un párrafo. <span> Texto dentro de un span.</span></p>

<p><input type="button" name="boton01" id="boton01" value="Obtener texto del párrafo"></p>

Ejemplo de jQuery text() para asignar texto a un nodo

He preparado este segundo ejemplo para asignar texto a un nodo con jQuery.

<script>
$(document).ready(function(){
 $("#boton01").click(function(){
  $("#parrafo").text('Texto de sustitución');
 });
});
</script>

Os comento las líneas superiores del segundo ejemplo:

  • Se detecta el click del botón con id ‘boton01’.
  • Asignamos al párrafo con id ‘parrafo’ el texto ‘Texto de sustitución’
  • Todo el texto del nodo y nodos hijo se verán afectados.

El código HTML del párrafo y botones es el siguiente:

<p id="parrafo">Este es un texto dentro de un párrafo. <span> Texto dentro de un span.</span></p>

<p><input type="button" name="boton01" id="boton01" value="Obtener texto del párrafo"></p>

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

compartir
Publicado por
Aner Barrena