El método text () en jquery

El método text () establece o devuelve el contenido de texto de los elementos seleccionados , cuando se utiliza este método para devolver contenido, devuelve el contenido de texto de todos los elementos coincidentes (se eliminará el marcado HTML).

El método text () establece o devuelve el contenido de texto de los elementos seleccionados.
Cuando se utiliza este método para devolver contenido, devuelve el contenido de texto de todos los elementos coincidentes (se eliminará el marcado HTML).

Cuando se usa este método para establecer contenido, sobrescribe el contenido de TODOS los elementos coincidentes.
Sugerencia: Para establecer o devolver el HTML interno (texto + marcado HTML) de los elementos seleccionados, use el método html () .

Sintaxis

Devolver contenido de texto:

$(selector).text()

Establecer contenido de texto:

$(selector).text(content)

Establecer contenido de texto mediante una función:

$(selector).text(function(index,currentcontent))

Para saber el contenido de un elemento el objeto jQuery cuenta con un método llamado text(), por ejemplo:

let x = $("#parrafo1");

luego si hacemos x.text() obtenemos el contenido del párrafo con id igual a parrafo1.

Luego si queremos cambiar el texto del párrafo deberíamos disponer:

let x = $("#parrafo1");
x.text("Este es el texto nuevo");

Pero hay que tener mucho cuidado cuando utilizamos jQuery ya que podemos cambiar el contenido de muchos elementos con una sola llamada al método text, por ejemplo:

let x=$("p");
x.text("Este texto aparece en todos los párrafos del documento");

El código anterior crea un objeto jQuery con la referencia a todos los párrafos contenidos en el documento. Luego si llamamos al método text enviándole una cadena, esta aparecerá en todo el documento remplazando el contenido de los párrafos actuales.

El siguiente problema muestra el acceso y modificación unitaria y múltiple de contenidos de elementos.

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</head>

<body>
  <input type="button" value="Obtener el texto contenido en un párrafo" id="boton1"><br><br>
  <input type="button" value="Modificar el texto de un párrafo" id="boton2"><br><br>
  <input type="button" value="Modificar el texto de los elementos td de una tabla" id="boton3"><br><br>

  <p id="parrafo1">Texto del primer párrafo</p>
  <table border="1">
    <tr>
      <td>celda 1,1</td>
      <td>celda 1,2</td>
      <td>celda 2,1</td>
      <td>celda 2,2</td>
    </tr>
  </table>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="func7.js"></script>
</body>

</html>

Ver ejemplo anterior

func7.js

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("#boton1");
  x.click(extraerTexto);
  x = $("#boton2");
  x.click(modificarTexto);
  x = $("#boton3");
  x.click(modificarDatosTabla);
}

function extraerTexto() {
  let x = $("#parrafo1");
  alert(x.text());
}

function modificarTexto() {
  let x = $("#parrafo1");
  x.text("Nuevo texto del párrafo");
}

function modificarDatosTabla() {
  let x = $("td");
  x.text("texto nuevo");
}

Como vemos esta página tiene tres botones, al presionarse el primero se dispara la función:

function extraerTexto() {
  let x = $("#parrafo1");
  alert(x.text());
}

Obtenemos la referencia al párrafo mediante su id (recordemos que en una página todos los valores de los id son distintos), luego extraemos el contenido mediante el método text() y lo mostramos en un alert.

La segunda función cambia el contenido del párrafo:

function modificarTexto() {
  let x = $("#parrafo1");
  x.text("Nuevo texto del párrafo");
}

Obtenemos la referencia del párrafo mediante su id y llamamos al método text enviándole el nuevo string a mostrar.

Por último la función:

function modificarDatosTabla() {
  let x = $("td");
  x.text("texto nuevo");
}

Crea un objeto de la clase jQuery con la referencia a todos los elementos td del documento (es decir los td de todas las tablas) y posteriormente mediante el método text modifica el contenido de todos ellos (todos los td del documento se cambian por el string "nuevo texto")

(adsbygoogle = window.adsbygoogle || []).push({});

El método text () en jquery

Sintaxis