Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


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:

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.

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:

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

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

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:

Selectores de jQuery

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

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies